Tabs
Tabs allow users to switch between different views within the same context.
Installation
npx jsx-daisyui add tabsDefault
tabs-default
Tab 1 content
Border
tabs-border
Tab 1 content
Box
tabs-box
Tab 1 content
Lift
tabs-lift
Tab 1 content
Props
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The controlled active tab value. |
defaultValue | string | - | The default active tab value. |
onValueChange | (value: string) => void | - | Callback when the active tab changes. |
variant | 'default' | 'border' | 'lift' | 'box' | 'default' | The visual variant of the tabs. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | The size of the tabs. |
Tabs.List
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'border' | 'lift' | 'box' | - | Overrides the tabs variant. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | - | Overrides the tabs size. |
Tabs.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The value of this tab trigger. |
Tabs.Content
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The value of the tab to display this content for. |