Tabs

Switches between related content panels. Two visual variants: line (default) and pill. Full keyboard navigation. Built on Radix UI.

Anatomy

<Tabs defaultValue="tab-1">
  <TabsList variant="line">
    <TabsTrigger value="tab-1" variant="line">Tab 1</TabsTrigger>
    <TabsTrigger value="tab-2" variant="line">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1">Content 1</TabsContent>
  <TabsContent value="tab-2">Content 2</TabsContent>
</Tabs>

Examples

Overview content goes here.

Pill variant

Monthly view.

With content

Haydn PhillipsAdmin

Jamie DaviesMember

Sara KimMember

TabsList props

variant= 'line'

'line' | 'pill'

Line shows a bottom border indicator. Pill shows a filled background on the active tab.

Prop	Type	Default	Description
variant	'line' \| 'pill'	'line'	Line shows a bottom border indicator. Pill shows a filled background on the active tab.

TabsTrigger props

value*

string

Matches the value on the corresponding TabsContent.

variant= 'line'

'line' | 'pill'

Must match the variant on TabsList.

disabled

boolean

Prevents selection.

Prop	Type	Default	Description
value*	string	—	Matches the value on the corresponding TabsContent.
variant	'line' \| 'pill'	'line'	Must match the variant on TabsList.
disabled	boolean	—	Prevents selection.

PreviousDivider NextBreadcrumb