Data display · Application UI
Tabs
A compound tabs component built on Base UI that renders a tabbed interface with optional horizontal or vertical orientation and two list variants (default pill or underline line).
Feature showcase
Installation
Features
7 examples
Default, Controlled, Disabled, Keep Mounted, Vertical, Vertical With Icons, With Icons.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | TabsTab.Value | undefined | - | Controlled active tab value. |
| defaultValue | TabsTab.Value | undefined | 0 | Default active tab value for uncontrolled usage. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout flow direction; vertical stacks the tab list and panels side by side. |
| onValueChange | (value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void | - | Callback fired when the active tab changes. |
| className | string | - | Additional CSS class names applied to the root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/tabs.tsx |
| Default example | content/examples/tabs/default.tsx |
| Controlled example | content/examples/tabs/controlled.tsx |
| Disabled example | content/examples/tabs/disabled.tsx |
| Keep Mounted example | content/examples/tabs/keep-mounted.tsx |
| Vertical example | content/examples/tabs/vertical.tsx |
| Vertical With Icons example | content/examples/tabs/vertical-with-icons.tsx |
| With Icons example | content/examples/tabs/with-icons.tsx |