v1.1.8

Tabs

A set of layered sections of content — known as tab panels — that are displayed one at a time.

Interactive Requires: uicraft.js JS init: automatic

Default

Pill-style tabs with a muted background container.

html

Account

Make changes to your account here.

Password

Change your password here.

Settings

Manage your application preferences.

<div data-tab-group="default">
  <div role="tablist" class="uc-tabs-list uc-w-full">
    <button role="tab" aria-selected="true"
      class="uc-tabs-trigger uc-active uc-flex-1">
      Account
    </button>
    <button role="tab" aria-selected="false"
      class="uc-tabs-trigger uc-flex-1">
      Password
    </button>
  </div>
  <div role="tabpanel" class="uc-mt-4 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface uc-p-6">...</div>
  <div role="tabpanel" class="uc-mt-4 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface uc-p-6 uc-hidden">...</div>
</div>

Default With Icons

Pill-style tabs with icons alongside labels.

html

Manage your account details and preferences.

Update your password and security settings.

Control how and when you receive notifications.

<div data-tab-group="default-icons">
  <div role="tablist" class="uc-tabs-list uc-w-full">
    <button role="tab" aria-selected="true"
      class="uc-tabs-trigger uc-active uc-gap-1.5 uc-flex-1">
      <svg><!-- icon --></svg> Account
    </button>
    <button role="tab" aria-selected="false"
      class="uc-tabs-trigger uc-gap-1.5 uc-flex-1">
      <svg><!-- icon --></svg> Security
    </button>
  </div>
  <div role="tabpanel" class="uc-mt-4 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface uc-p-6">...</div>
  <div role="tabpanel" class="uc-mt-4 uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface uc-p-6 uc-hidden">...</div>
</div>

Underline

Tab style with a bottom-border indicator instead of a pill background.

html

Overview content. This tab shows general information about your project.

Analytics content. Track your project's performance metrics here.

Reports content. Generate and view detailed reports.

<div data-tab-group="underline">
  <div role="tablist" class="uc-tabs-list-underline">
    <button role="tab" aria-selected="true"
      class="uc-tabs-trigger-underline uc-active">
      Overview
    </button>
    <button role="tab" aria-selected="false"
      class="uc-tabs-trigger-underline">
      Analytics
    </button>
  </div>
  <div role="tabpanel" class="uc-py-6">...</div>
  <div role="tabpanel" class="uc-py-6 uc-hidden">...</div>
</div>

Underline With Icons

Underline tabs with icons alongside labels.

html

Overview content. General information about your dashboard.

Analytics content. Track performance metrics here.

Reports content. Generate and view detailed reports.

<div data-tab-group="underline-icons">
  <div role="tablist" class="uc-tabs-list-underline">
    <button role="tab" aria-selected="true"
      class="uc-tabs-trigger-underline uc-active uc-inline-flex uc-items-center uc-gap-1.5">
      <svg><!-- icon --></svg> Overview
    </button>
    <button role="tab" aria-selected="false"
      class="uc-tabs-trigger-underline uc-inline-flex uc-items-center uc-gap-1.5">
      <svg><!-- icon --></svg> Analytics
    </button>
  </div>
  <div role="tabpanel" class="uc-py-6">...</div>
  <div role="tabpanel" class="uc-py-6 uc-hidden">...</div>
</div>

Anatomy

HTML structure of the Tabs component.

div[data-tab-group]                     ← Scoping wrapper
├── div[role="tablist"]                  ← Tab buttons container
│   ├── button[role="tab"]               ← Tab button (active)
│   └── button[role="tab"]               ← Tab button (inactive)
├── div[role="tabpanel"]                 ← Visible panel
└── div[role="tabpanel"].uc-hidden        ← Hidden panel

API Reference

All CSS classes available for the Tabs component.

Class Type Description
role="tablist" Base Container for tab buttons — pill or underline style
role="tab" Base Individual tab button
role="tabpanel" Base Content panel associated with a tab
uc-bg-neutrals-muted uc-p-1 uc-rounded-lg Variant Default (pill) tablist container
uc-border-b uc-border-border-default Variant Underline tablist container
uc-bg-neutrals-surface uc-shadow-sm State Active tab in default style
uc-border-b-2 uc-border-accents-blue State Active tab underline indicator
data-tab-group Modifier HTML attribute on wrapper — scopes tab switching
data-tab / data-panel Modifier HTML attributes linking tabs to their panels

Accessibility

Keyboard and screen reader support.

Feature Details
Roles tablist, tab, and tabpanel roles for proper semantics
Selection aria-selected="true" on the active tab
Association aria-controls and aria-labelledby link tabs to panels
Keyboard Arrow keys move between tabs, Home/End jump to first/last
Focus Only the active tab is in tab order (tabindex="0"), others are tabindex="-1"