Navigation
Tabs
Switch between views of the same context — a project's Overview, Tasks, and Files, or settings panes. Four variants for different densities, with a sliding active indicator, icons, and counts.
npx shadcn@latest add @orbit/tabsOverview
The default underline variant with icons, counts, and panels. Click the tabs — the 2px indicator slides between them.
Variants
Same behavior, four looks. Pick by surface and density — all are interactive.
Icons & counts
A leading icon clarifies each view; a count badge surfaces how much is inside. The badge recolors when its tab is active.
Sizes & states
Two sizes to match surrounding density; disabled tabs are dimmed, non-clickable, and skipped by keyboard navigation.
Vertical
For settings layouts, stack the tabs down the side with the indicator on the left edge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | TabItem[] | — | Tabs in order: { value, label, icon?, count?, disabled?, panel? }. The count renders as an 18px pill; panel content shows when showPanel is set. |
| variant | "line" | "pills" | "segment" | "enclosed" | "line" | Underline, tinted pills, segmented control, or folder tabs. |
| size | "sm" | "md" | "md" | Tab height — line 40/34 · pills 34/30 · segment 32/28 · enclosed 38/34px. |
| orientation | "horizontal" | "vertical" | "horizontal" | Vertical stacks the tabs with the indicator on the left edge. |
| fullWidth | boolean | false | Tabs stretch to share the full container width (horizontal only). |
| showPanel | boolean | false | Render each tab's panel content in an ARIA tabpanel. |
| value / defaultValue | string | — | Controlled / initial active tab. Defaults to the first enabled tab when uncontrolled. |
| onChange | (value: string) => void | — | Called with the newly activated tab's value. |
| className | string | — | Extra classes for the root wrapper (listClassName / panelClassName target the parts). |
Usage
Tabs organize peer views; they don't advance a flow.
Use for peer views of one thing
Overview / Tasks / Files all describe the same project — that's exactly what tabs are for.
Use tabs as a wizard
Sequential steps need a stepper or Next/Back — tabs imply you can jump around freely.
Keep labels to one or two words
Short, parallel labels keep the row scannable and prevent wrapping.
Overflow with too many tabs
Past 5–6, switch to a select or a sidebar; a crowded tab row is hard to scan.
Keyboard & accessibility
Built on Base UI Tabs: tablist / tab / tabpanel roles, aria-selected on the active tab, roving focus with arrow-key activation, and disabled tabs skipped.