Tabs

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

Default

Basic tabs with content panels.

html

Account

Make changes to your account here.

Password

Change your password here.

<div data-tab-group="default">
  <div role="tablist">
    <button role="tab" aria-selected="true">Account</button>
    <button role="tab" aria-selected="false">Password</button>
  </div>
  <div role="tabpanel">...</div>
</div>

Underline Style

Alternative tab style with underline indicator.

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.

With Icons

Tabs with icons.

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 Pill-style tablist container
uc-border-b uc-border-border-default Variant Underline-style tablist container
uc-bg-neutrals-surface uc-shadow-sm State Active tab in pill style
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"