Component

Tabs

Switches between related content sections without page navigation.

Usage

Use tabs to organize content into parallel sections. Keep tab labels short and scannable.

Playground

Preview

Account content

Configure

Tab 1 label

Tab 2 label

Tab 3 label

Code

<Tabs defaultValue="tab1" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="tab1">Account</TabsTrigger>
    <TabsTrigger value="tab2">Password</TabsTrigger>
    <TabsTrigger value="tab3">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Account content</TabsContent>
  <TabsContent value="tab2">Password content</TabsContent>
  <TabsContent value="tab3">Settings content</TabsContent>
</Tabs>

Do

Use 2–5 tabs, more becomes hard to scan
Keep labels to 1–2 words

Don't

Don't use tabs for multi-step flows, use a stepper instead