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

NameTypeDefaultDescription
valuestringCurrently active tab value
defaultValuestringInitial active tab when uncontrolled
orientation"horizontal" | "vertical""horizontal"Tab layout direction

Examples

Basic Tabs