Tabs

Switch between views in place.

Default

Pill-style tabs on a muted background.

Overview content.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content.</TabsContent>
  <TabsContent value="details">Details content.</TabsContent>
  <TabsContent value="settings">Settings content.</TabsContent>
</Tabs>

Line variant

Underline style for denser or more editorial layouts. Pass variant="line" to TabsList.

Underline moves to the active tab, no background pill.

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content.</TabsContent>
</Tabs>