Tabs

Accessible tab navigation built on Radix UI.

Examples

Basic

High-level overview. Use Tabs for contextual navigation inside a page.

<TabsRoot defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="metrics">Metrics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="metrics">Metrics content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</TabsRoot>

API Reference

Props of the Tabs component.

Prop	Type	Default	Description
`defaultValue`	`string`	—	Initially selected tab (uncontrolled).
`value`	`string`	—	Selected tab (controlled).
`onValueChange`	`(value: string) => void`	—	—
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	—