Tabs

A compound tab component with roving tabindex for keyboard navigation. Use Arrow keys to move between tabs, Home/End to jump to first/last.

Basic

Focus a tab and use ← → to navigate, Home End to jump. Disabled tabs are skipped.

A rounded pill-style tab list with a sliding background indicator.

Add <Tabs.Separator /> between triggers to display separator lines.

Sidebar-style tabs with content on the right. Uses ArrowUp/Down for keyboard navigation.

Prop	Type	Default	Description
`value`	`string`	—	The currently active tab value (controlled).
`defaultValue`	`string`	—	The initially active tab value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called when the active tab changes.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the active tab indicator.
`variant`	`"underline" \| "pill"`	`"underline"`	Visual variant. Pill uses a rounded container with sliding background.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout orientation. Vertical renders tabs as a sidebar.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

string

The currently active tab value (controlled).

defaultValue

string

The initially active tab value (uncontrolled).

onValueChange

(value: string) => void

Called when the active tab changes.

color"blue"

Accent color for the active tab indicator.

variant"underline"

"underline" | "pill"

Visual variant. Pill uses a rounded container with sliding background.

orientation"horizontal"

"horizontal" | "vertical"

Layout orientation. Vertical renders tabs as a sidebar.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}