Component

Tabs

Arrow-key navigable tabs with a sliding indicator: an underline by default, or a raised tile on a pill track with variant='pill'.

Basic

Overview panel

Icon tabs

Home panel

Disabled tab

Overview panel

Full-width (mobile)

Overview panel

Controlled

Overview panel

Active: overview

Segmented (pill)

variant='pill' renders the tabs as a segmented control with the active tile sliding between slots - the tab-select pattern. The indicator never overshoots its slot, so it cannot cross the neighbouring label mid-move.

Usage and billing at a glance.

API reference

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/tabs").Tabs.Root>.

Tabs.List props

Prop	Type	Default	Description
variant	"pill" \| "underline"	"underline"	`"underline"` (default): a 2px bar under the active tab. `"pill"`: a white pill list with a sliding raised black tile, as in SegmentedControl; for tab bars that navigate.

variant"underline"

"pill" | "underline"

`"underline"` (default): a 2px bar under the active tab. `"pill"`: a white pill list with a sliding raised black tile, as in SegmentedControl; for tab bars that navigate.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/tabs").Tabs.List>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent