Tabs

Layered sections of content. Supports pill and underline variants, horizontal and vertical orientations, icons and badges.

Tabsorientation: horizontal · vertical

TabsListvariant: default · line · size: default · xl

TabsTriggervalue · disabled

TabsContentvalue — rendered panel

Playground

Overview content — summary of activity and key metrics.

Variant— variant

Size— size

Orientation— orientation

Show icons— showIcons

Variant — line (underline)

Manage your account details and public profile.

Labels of different lengths

Each tab is as wide as its own label. The list sizes itself to its content, so an even split would give every tab the same width and the longer labels would spill over their neighbours.

Size — xl (matches Button xl · h-11)

Overview content at xl size.

Dashboard panel — line variant at xl size.

With icons

Dashboard panel

With badges

12 open issues.

Orientation — vertical

Profile settings

Disabled tab

This tab is active and accessible.

Tokens used

6 semantic tokens consumed by this component.

--mutedMuted

bg-mutedtext-mutedborder-muted

--muted-foregroundMuted Foreground

text-muted-foreground

--backgroundBackground

bg-background

--foregroundForeground

text-foreground

--inputInput

bg-inputborder-input

--ringRing

ring-ringring