Tabs
A set of layered sections of content with neumorphic styling, built on top of Base UI.
Installation
$ npx shadcn@latest add "/r/tabs.json"
Usage
Make changes to your account here.
Examples
Sizes
The Tabs component is available in small, medium, and large sizes.
Props
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Tabs | size | "sm" | "md" | "lg" | "md" | The size of the tabs. |
Tabs | defaultValue | string | - | The value of the tab that should be active by default. |
Tabs | value | string | - | The value of the active tab, for controlled components. |
Tabs | onValueChange | (value: string) => void | - | Callback fired when the active tab changes. |
Tabs | orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the tabs. |
TabsList | className | string | - | Additional CSS classes for the tabs list. |
TabsTrigger | value | string | - | A unique value for the tab. |
TabsTrigger | disabled | boolean | false | Whether the tab is disabled. |
TabsContent | value | string | - | A unique value for the panel. |