Component

Tabs

Switches between related content sections without page navigation.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add tabs

This item delegates to the public shadcn registry. AG-themed variants still require npx shadcn@latest add https://design.ag.org/r/ag-globals.

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>

Variants & States

Supported variants, sizes, and interaction states for this component.

Variants

Default (pill)
Line (underline)

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