Tabs

Sections with distinct selection and focus states.

Your account details.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add tabs

What add tabs installs alongside the component. The CLI skips any you already have in a compatible version.

8 examples · 1 component

Your account details.

A compact group on a soft surface.

General preferences.

A clean documentation style: a bottom indicator on the active tab.

Daily view.

No background surface; the active tab is highlighted minimally.

Recent activity.

The active tab is filled with the brand color and contrasting text.

General view.

Compose an Icon before the text and use gap to space it. The icon is decorative (the text already names the tab).

Recent activity.

shape="pill" fully rounds the container and the active pill.

General preferences.

indicatorPosition="top" moves the bar to the top edge of the active tab.

Daily view.

In underline, shape="pill" thickens the bar into a rounded lozenge.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`variant` Visual style of the tab group; solid fills the active tab with the brand color.	`"segmented" \| "underline" \| "ghost" \| "solid"`	`"segmented"`
`shape` pill fully rounds the container and the active pill; in underline it thickens the bar.	`"rounded" \| "pill"`	`"rounded"`
`indicatorPosition` Side of the indicator in the underline variant.	`"bottom" \| "top"`	`"bottom"`
`Tabs` Root; accepts defaultValue, value and onValueChange.	`div`	—
`TabsList` Container for the tabs.	`div`	—
`TabsTab` A tab; requires value.	`button`	—
`TabsPanel` Content; requires a matching value.	`div`	—

The states that apply to this component and their visual treatment.

State	Treatment
Inactive tab	Muted text without a highlighted surface.
Selected	Background or underline and contrast, not color alone.
Focus visible	Keyboard outline on the tab; arrow keys move focus.
Active panel	The panel is focusable so navigation can continue.
Disabled	A disabled tab is skipped in the focus order.

Arrow keys move focus between tabs and Enter or Space activates one; the panel is focusable.

The active tab is distinguished by background or underline and contrast, not color alone.