Display
Tabs
Switch between views of the same thing without leaving the page. A muted pill, or a line.
packages/design-system/components/ui/tabs.tsx
Examples
Identity, guidelines and a launch kit.
Every project.
Your details.
Anatomy
- 01Tabs
- 02List, the pill
- 03Triggers
- 04Panels
Usage
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@repo/design-system/components/ui/tabs";
<Tabs value={tab} onValueChange={setTab}>
<TabsList>
<TabsTrigger value="scope">Scope</TabsTrigger>
<TabsTrigger value="price">Price</TabsTrigger>
</TabsList>
<TabsContent value="scope">...</TabsContent>
<TabsContent value="price">...</TabsContent>
</Tabs>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | number | none | The active tab, on Tabs. |
| onValueChange | (value, details) => void | none | Called with the new tab. |
| orientation | "horizontal" | "vertical" | "horizontal" | Vertical stacks the list beside the panels. |
| TabsList variant | "default" | "line" | "default" | A muted pill, or no fill and an underline on the active tab. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Keep labels to a word or two.
Don't
- Use tabs for steps in a sequence.