Tabs

A set of layered panels where only one panel is visible at a time. Ideal for organizing related content into switchable sections.

Basic Tabs

Manage your account settings and preferences.

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Manage your account settings and preferences.
  </TabsContent>
  <TabsContent value="password">
    Update your password and security options.
  </TabsContent>
  <TabsContent value="notifications">
    Configure how you receive notifications.
  </TabsContent>
</Tabs>

API Reference

Prop	Type	Default	Description
`defaultValue`	`string`	—	The value of the tab that should be active when initially rendered. Use when you do not need to control the active tab.
`value`	`string`	—	The controlled value of the currently active tab. Must be used with onValueChange.
`onValueChange`	`(value: string) => void`	—	Callback fired when the active tab changes. Receives the new tab value.