Basic Tabs
Overview content goes here. Summarize the key information at a glance.
With Overflow Menu
Use Tabs.More to group overflow tabs into a dropdown.
Overview content here.
Tabs Props
| Prop | Type | Description |
|---|---|---|
| defaultValue | string | The value of the tab that should be active by default. |
| value | string | Controlled active tab value. |
| onValueChange | (value: string) => void | Callback when the active tab changes. |
| className | string | Additional classes on the root element. |
Sub-components: Tabs.List, Tabs.Trigger, Tabs.Content, Tabs.More, Tabs.MoreItem.
Usage
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="details">Details</Tabs.Trigger>
<Tabs.More>
<Tabs.MoreItem value="notes">Notes</Tabs.MoreItem>
<Tabs.MoreItem value="history">History</Tabs.MoreItem>
</Tabs.More>
</Tabs.List>
<Tabs.Content value="overview">...</Tabs.Content>
<Tabs.Content value="details">...</Tabs.Content>
<Tabs.Content value="notes">...</Tabs.Content>
<Tabs.Content value="history">...</Tabs.Content>
</Tabs>