Navigation
Overlays
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 |