One view, switched.

A Radix-backed primitive that swaps panels in place. The variant — segmented, pill, or underline — is set once on the root and flows to every trigger through context. Accent rests on the underline indicator alone.

Anatomy

Overview Sessions Notes

Panel content for the active tab renders here — only the selected TabsContent mounts.

1Tabs — root; variant set once, shared via context to children

2TabsList — the trigger track; role="tablist"

3TabsTrigger — one per panel; carries data-state

4TabsContent — the panel; only the active one is shown

Usage

Set variant once on the <Tabs> root and let context carry it. Use underline for page chrome, segmented for settings and filters.

Don't

Don't add accent fills to segmented or pill active states — the active pill takes primary ink. Accent is reserved for the underline indicator.

Sizes · data-size

Compact toolbars

Day Week

Default control height

Day Week

Prominent / spacious

Day Week

Variants

segmented

Default · pill cluster on a muted track

Overview Sessions Notes

pill

Standalone pills · no track

Overview Sessions Notes

underline

Indicator on bottom border · page chrome

Overview Sessions Notes

Trigger states · segmented

Inactive inactive

Hover hover

Focus focus-visible · ring-2

Active active · data-state

Disabled disabled · 0.5

Props

Prop	Type	Default	Notes
variant	segmented · pill · underline	"segmented"	Set on `<Tabs>` root; propagates to TabsList + TabsTrigger via context.
data-size	sm · md · lg	—	On TabsTrigger. A data attribute (not a CVA variant) that redefines `--control-h` / `--control-px`. Omit for the per-variant default.
value / defaultValue	string	—	Controlled / uncontrolled active tab. Forwarded to Radix Root.
onValueChange	(v: string) => void	—	Fires when the active tab changes.
disabled	boolean	false	On TabsTrigger — dims to 0.5 and removes pointer events.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait