Tabs

A fine ruler rail for primary views and a recessed selector for secondary views.

Preview

Su uses the Quiet instrument direction. Use the mode switcher above to see light and dark.

North workspace

12 members are active in this workspace.

Vertical tabs · manual activation

Arrow keys move focus. Press Enter or Space to open a section.

Usage

Use tabs when each panel is a peer and people can switch without losing their work.
Keep labels short and order tabs by a clear mental model.
Use the primary ruler for top-level views. Use the secondary selector within a view, with no repeated underline.
Keep secondary roots inside their owning panel. Set keepMounted on that panel to retain its local selection.

API

Prop	Values	Default
Root	value, defaultValue, onValueChange, orientation	horizontal
List variant	primary, secondary	primary
List activateOnFocus	true, false	true
Tab	value, disabled	—
Panel	value, children, keepMounted	—

Example

import { Tabs } from '@zao/react';

<Tabs.Root defaultValue="overview">
  <Tabs.List aria-label="Workspace views">
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="activity">Activity</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview" keepMounted>
    <Tabs.Root defaultValue="summary">
      <Tabs.List variant="secondary" aria-label="Overview views">
        <Tabs.Tab value="summary">Summary</Tabs.Tab>
        <Tabs.Tab value="members">Members</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="summary">Workspace overview</Tabs.Panel>
      <Tabs.Panel value="members">Workspace members</Tabs.Panel>
    </Tabs.Root>
  </Tabs.Panel>
  <Tabs.Panel value="activity">Recent activity</Tabs.Panel>
</Tabs.Root>

Accessibility

Base UI preserves tablist, tab, and tabpanel relationships. Arrow keys move focus and activate by default; set activateOnFocus={false} to activate with Enter or Space. Labels, targets, and focus outlines stay fixed. Long strips scroll within their viewport; reduced motion changes selection immediately.