Components

Tabs

Switch between sibling views inside the same page context. Segmented control on top of bg-muted.

Updated Jul 8, 2026 by Leonardo Posada

Basic

Overview content goes here.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="rules">Rules</TabsTrigger>
    <TabsTrigger value="lists">Lists</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
</Tabs>

When to use

  • 2–5 sibling views under the same page (Overview / Rules / Lists).
  • Filter across categories inside a page.

When not to use

  • Navigating to a different page/scope — use Sidebar navigation.
  • More than 5 tabs — rethink the information architecture.

Usage

Do
  • Keep tab labels short (1–2 words).
  • Default to the most-used tab.
  • Persist the active tab in URL when it's a sharable state.
Don't
  • Don't hide critical primary actions behind a non-default tab.
  • Don't mix Tabs with a Sidebar for the same navigation level.