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).
Default
A high-level summary of your project is displayed here.
Controlled
Step 1 — Fill in your details
Enter the required information to proceed.
Step 1 of 3
Disabled
One tab disabled
Your documents are listed here.
Multiple disabled
Free plan features are available.
Keep Mounted
Switch tabs and come back — the input value is preserved because keepMounted keeps the DOM node alive.
Preview
Nothing to preview yet.
No revision history yet.
Vertical
Profile
Update your display name, bio, and avatar.
Vertical With Icons
Account
Update your username, email, and profile photo.
With Icons
View and edit your public profile information.
Installation
npx shadcn@latest add @byronwade/tabsProps
| 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. |