Tabs
Splits content into named panels and shows one at a time, as a row of tabs or a list whose rows can each carry a sentence.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
3 examplesHorizontal
Vertical
Vertical, index and description
States
2 examplesHover
Focus visible
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Controlled selected value; pair with `onValueChange`. |
| defaultValue | string | - | Initial value when uncontrolled. |
| onValueChange | (value: string) => void | - | Called with the value of the tab picked. |
| orientation | 'horizontal'|'vertical' | 'horizontal' | Horizontal: a row on the control ladder with the accent edge along the bottom. Vertical: a list of rows with hairlines between, the accent edge on the left, and room for a description per row. |
| size | 'sm'|'md'|'lg' | 'md' | Horizontal only: the rung on the shared control ladder (28, 32 or 40px tall; 12, 14 or 16px type), so a tab row sits level with the Buttons beside it. |
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-labelreq | string | - | Names the list for assistive tech (or use aria-labelledby). |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| valuereq | string | - | The value this tab selects. |
| childrenreq | React.ReactNode | - | The tab's label. |
| leading | React.ReactNode | - | A short mark before the label: an index ("01") or an icon. Faint at rest, primary when hovered or picked. |
| description | React.ReactNode | - | Vertical only: a sentence under the label, muted at rest, secondary when hovered or picked. |
| disabled | boolean | - | When true, disables the control. |
TabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
| valuereq | string | - | The value whose panel this is. Only the selected value's panel is mounted. |
AI Canvas