Tabs
Tabbed panels with full keyboard support. Arrow keys move and select, Home/End jump to the ends.
Preview
Live preview
Workspace name, avatar and default language.
Usage
Examples
Pill variant
Charts and totals.
<Tabs variant="pill" defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="activity">Activity</TabsTrigger>
</TabsList>
<TabsContent value="overview">Charts and totals.</TabsContent>
<TabsContent value="activity">Recent events.</TabsContent>
</Tabs>Controlled tabs
First panel.
const [tab, setTab] = useState("a")
<Tabs value={tab} onValueChange={setTab}>…</Tabs>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | — | Controlled or uncontrolled selected tab value. |
| onValueChange | (value: string) => void | — | Fires when the selection changes by click or keyboard. |
| variant | "line" | "pill" | "line" | Underline tabs or a segmented pill. Applies to list, trigger and content. |
| size | "sm" | "md" | "lg" | "md" | Type scale and padding of the triggers. |
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the tab list (forwarded to Radix). |
| TabsTrigger value(required) | string | — | Matches the TabsContent value it controls. |
| TabsContent value(required) | string | — | Panel content; unmounted while inactive. |
Accessibility
Accessibility notes
- Renders role="tablist", role="tab" (with aria-selected and aria-controls) and role="tabpanel".
- The tab list is a single tab stop: Left/Right (or Up/Down when vertical) move focus and select, Home/End jump to the first/last tab.
- Inactive panels are unmounted, so hidden content is never reachable by screen reader.
- Keep each trigger label short and unique; it becomes the accessible name of the panel.
- Focus ring uses the ring token at 2px with an offset, and never relies on color alone.