components
Tabs
Tabs are for peer views of the same subject. If the panels don't belong together, they belong on their own pages — tabs aren't a shortcut for nav.
Read the full specUnderline (default)
Bottom border on the list, accent underline on the active trigger. The canonical variant for in-page navigation.
42 reports across 6 areas in the last seven days. Incident volume down 18% week-on-week.
tsx
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="reports">Reports</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="overview">…</TabsContent>
<TabsContent value="reports">…</TabsContent>
<TabsContent value="settings">…</TabsContent>
</Tabs>Pill
Rounded pill background on the active trigger. Use inside cards or dense toolbars where an underline would be visually noisy.
Today: 6 reports, 2 critical.
tsx
<TabsList className="h-9 gap-1 rounded-md border border-border bg-muted/40 p-1">
<TabsTrigger
value="…"
className="h-7 rounded-sm border-b-0 px-3
data-[state=active]:bg-background
data-[state=active]:text-foreground
data-[state=active]:shadow-sm"
>
…
</TabsTrigger>
</TabsList>Disabled trigger
Disable a trigger when a tab isn't yet available. Keep it visible — hiding and showing tabs is disorienting.
Live incidents in your areas.