Tabs
Organize content into switchable panels. Built on Radix UI Tabs.
Default (material style)
Manage your account settings and preferences.
Toggle (segmented control)
Content for the first tab. Use
variant="toggle" on TabsList and TabsTrigger for a segmented control style.Usage
Use tabs to organize related content into panels that share the same context. Avoid using tabs for sequential or step-based workflows.
Default variant is a material style: labels with ghost hover and a primary-colored underline on the active tab. Use toggle variant on TabsList and TabsTrigger for a segmented control / pill style.
Keep tab labels short (1-2 words). Content in each tab should be independent and not require comparing across tabs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant (TabsList) | "default" | "toggle" | "default" | Material style (default) or segmented toggle style |
| variant (TabsTrigger) | "default" | "toggle" | "default" | Must match TabsList variant for correct appearance |
| variant (TabsContent) | "default" | "toggle" | "default" | Spacing below the tab list; use same variant as TabsList |
| defaultValue | string | — | Initially active tab value |
| value | string | — | Controlled active tab value |
| onValueChange | (value: string) => void | — | Callback when active tab changes |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the tab list |