Tabs Examples
A set of layered sections of content that display one panel at a time.
Tab Variants
Default Tabs
The default tab style with a subtle background
Account Settings
Manage your account settings and preferences.
Underline Tabs
Tabs with an underline indicator
Overview
View a summary of your account activity.
More Tab Variants
Pills Tabs
Tabs with a pill-shaped indicator
Messages
View your recent messages and conversations.
Boxed Tabs
Tabs with a boxed appearance
Profile
Manage your profile information.
Advanced Tab Variants
Vertical Tabs
Tabs arranged vertically
General Settings
Configure general application settings.
Tabs with Icons
Tabs with both icons and text
Home
Welcome to your dashboard.
Controlled Tabs
This example demonstrates controlled tabs where the active tab is managed by state.
Account Settings
Manage your account settings and preferences.
Tab Props
The Tabs component API reference.
Tabs
A set of layered sections of content that display one panel at a time.
| Prop | Description | Type | Default |
|---|---|---|---|
| defaultValue | The default value of the tabs (uncontrolled). | string | - |
| value | The controlled value of the tabs. Must be used with onValueChange. | string | - |
| onValueChange | Callback when the value changes. | (value: string) => void | - |
| orientation | The orientation of the tabs. | "horizontal" | "vertical" | "horizontal" |
| variant | The visual style of the tabs. | "default" | "underline" | "pills" | "boxed" | "default" |
| size | The size of the tabs. | "sm" | "md" | "lg" | "md" |
TabsTrigger
The button that activates its associated content.
| Prop | Description | Type | Default |
|---|---|---|---|
| value | The value of the tab. Must match the value of the corresponding TabsContent. | string | - |
| disabled | Whether the tab is disabled. | boolean | false |
| icon | Optional icon to display alongside the tab text. | React.ReactNode | - |
TabsContent
The content associated with a tab trigger.
| Prop | Description | Type | Default |
|---|---|---|---|
| value | The value of the tab content. Must match the value of the corresponding TabsTrigger. | string | - |
| forceMount | Force mounting the content when it's not active. | boolean | false |