Tabs.
Animated active indicator with keyboard arrow navigation.
Your workspace overview. Watch the selection glide!
The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.
Props & API reference
Parameters available in the shared component, including value types, requirements and accepted options.
| Parameter | Type | Required | Default | Possible values | Description |
|---|---|---|---|---|---|
children | ReactNode | Yes | — | — | TabsList/TabsTrigger/TabsContent composition. |
value | string | No | — | — | Controlled selected tab ID. |
defaultValue | string | No | "" | — | Initial uncontrolled tab ID. |
onValueChange | (value: string) => void | No | — | — | Invoked when selected tab changes. |
className | string | No | — | — | Additional tabs container class. |
TabsTrigger.value | string | Yes | — | — | Tab ID; must correspond to TabsContent.value. |
TabsContent.value | string | Yes | — | — | Associated tab panel ID. |