Tabs

Switches between panels of related content.

$48,200.00 paid across 12 invoices this quarter.

When to use

Use when: Switching between views of the same context, one at a time.
Avoid when: People need to compare views, or the tabs navigate between pages.

Installation

bunx shelf add tabs

The source lands in src/components/ui/tabs.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Tabs from "@/components/ui/tabs";

<Tabs.Root defaultValue="overview">
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="activity">Activity</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">…</Tabs.Panel>
  <Tabs.Panel value="activity">…</Tabs.Panel>
</Tabs.Root>

Examples

Vertical

Tabs stacked down the side, for settings-style navigation.

Workspace name, time zone and default currency.

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.