- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Tabs
Tabbed interface for organizing content into switchable panels. Includes TabsList, TabsTrigger, and TabsContent.
Figma: DS-001 Foundations · 301:5934
Import
Live Demo
Tabbed interface with trigger list and content panels.
Default — Horizontal
Overview content — manage your account and preferences.
Line — Horizontal
Overview content with line-style tabs.
Default — Vertical
Vertical tabs — Overview content.
With disabled tab
Preview content — the Settings tab is disabled.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | — | Currently active tab value |
| defaultValue | string | — | Initial active tab when uncontrolled |
| orientation | "horizontal" | "vertical" | "horizontal" | Tab layout direction |