Organize content into multiple panels with tabbed navigation.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "underline" | "contained" | underline | Visual style variant (applies to TabsList and TabsTrigger) |
| defaultValue | string | — | Default active tab value |
| value | string | — | Controlled active tab value |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| List Border | color.border | var(--border) | Tab list bottom border | |
| Inactive Text | color.muted-foreground | var(--muted-foreground) | Inactive tab text | |
| Active Text | color.primary | var(--primary) | Active tab text color | |
| Active Border | color.primary | var(--primary) | Active tab underline | |
| Hover Border | color.border | var(--border) | Tab hover underline (non-selected only) |
Default tab style with an underline indicator.
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
</Tabs>Pill-style tabs with a contained background indicator.
<Tabs defaultValue="overview">
<TabsList variant="contained">
<TabsTrigger variant="contained" value="overview">Overview</TabsTrigger>
<TabsTrigger variant="contained" value="analytics">Analytics</TabsTrigger>
<TabsTrigger variant="contained" value="reports">Reports</TabsTrigger>
</TabsList>
</Tabs>Individual tabs can be disabled while others remain interactive.
<TabsTrigger value="reports" disabled>Reports</TabsTrigger>
Tabs that expand to fill the available width.
<TabsList className="w-full"> <TabsTrigger value="music" className="flex-1">Music</TabsTrigger> <TabsTrigger value="podcasts" className="flex-1">Podcasts</TabsTrigger> </TabsList>
Combine icons with text labels for enhanced visual clarity.
<TabsTrigger value="profile" className="gap-2"> <UserIcon className="h-4 w-4" /> Profile </TabsTrigger>
Use TabsContent to render content associated with each tab.
View and edit item details here.
<Tabs defaultValue="details">
<TabsList>
<TabsTrigger value="details">Details</TabsTrigger>
<TabsTrigger value="activity">Activity</TabsTrigger>
</TabsList>
<TabsContent value="details">
<div>View and edit item details here.</div>
</TabsContent>
<TabsContent value="activity">
<div>Recent activity and changes.</div>
</TabsContent>
</Tabs>