Tabs

Switches between layered views of the same content area, one panel shown at a time. Reach for Tabs to organize settings sections, panel modes, or detail views — not for navigating between documents or files (use PageTabBar for browser-style, closeable document tabs). The default variant is a pill/segmented control that reads as a self-contained switch; the line variant is a lighter underline that sits flush at the top of a page or card section. Use md (32px) for standalone tab strips and sm (28px) in dense or inline contexts; add stretch to distribute triggers evenly across a fixed width.

Default

Make changes to your account here.

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
  <TabsContent value="team">
    Manage your team here.
  </TabsContent>
</Tabs>

Line variant

Make changes to your account here.

<Tabs variant="line" defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="account">…</TabsContent>
</Tabs>

Stretched

<Tabs stretch defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
</Tabs>

Sizes

<>
  <Tabs size="md" defaultValue="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="analytics">Analytics</TabsTrigger>
      <TabsTrigger value="reports">Reports</TabsTrigger>
    </TabsList>
  </Tabs>
  <Tabs size="sm" defaultValue="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="analytics">Analytics</TabsTrigger>
      <TabsTrigger value="reports">Reports</TabsTrigger>
    </TabsList>
  </Tabs>
</>

Stretched + line

<Tabs stretch variant="line" defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
</Tabs>

Props

Prop	Type	Default
variant	"default" \| "line"	"default"
size	"sm" \| "md"	"md"
stretch	boolean	false
…rest	Radix Tabs.Root props	—

Source

packages/react/src/components/tabs.tsx · Figma node 2819:31096