Tabs

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/tabs

npx shadcn@latest add http://localhost:3002/r/tabs.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/tabs; inside this monorepo, from @rabtx/ui/tabs. The API is shadcn's.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rabtx/ui/tabs";

export function Settings() {
  return (
    <Tabs defaultValue="account">
      <TabsList aria-label="Settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Your name, email and avatar.</TabsContent>
      <TabsContent value="password">Change your password.</TabsContent>
    </Tabs>
  );
}

Name the list with an aria-label (or aria-labelledby). Every panel stays mounted and is hidden while its tab is not selected, so its content is in the server HTML. A list with no panels (a segmented filter, say) is fine: its tabs simply control nothing.

VariantsCopy Anchor Link

segmented (the default) is a recessed track with a raised thumb, pill fills the selected tab with --primary on a raised capsule, underline draws a 2px line under it, and expandable is a row of icons where the selected tab opens to show its label.

PillCopy Anchor Link

UnderlineCopy Anchor Link

ExpandableCopy Anchor Link

Give every tab an icon. A folded tab is a square icon button, still named by its label (the label is folded, not removed). The selected tab's label opens in a grid column that animates from 0fr to 1fr on the swap spring, so the tab grows to the label's natural width without measuring it, and the label fades in out of a small blur. Closing is shorter and plain.

VerticalCopy Anchor Link

orientation="vertical" puts the list beside the panels and moves focus with the up and down arrows. The underline becomes a line on the list's start edge.

Manual activationCopy Anchor Link

By default a tab is selected as the arrow keys reach it (activationMode="automatic"). With manual the arrows only move focus and Enter or Space selects, for panels that are slow to show.

DisabledCopy Anchor Link

A disabled tab is dimmed, cannot be selected and is skipped by the arrow keys.

ControlledCopy Anchor Link

OverflowCopy Anchor Link

A row longer than its box scrolls sideways with no scrollbar; moving focus to a tab scrolls it into view.

Right to leftCopy Anchor Link

The row starts at the inline start, the indicator follows, and the left and right arrows swap.

APICopy Anchor Link

Tabs takes everything a div takes, plus:

TabsList takes everything a div takes, plus:

TabsTrigger takes everything a button takes, except type and value, plus:

TabsContent takes everything a div takes, plus a required value, the tab it belongs to.

Outside React, the class names are exported from @rabtx/ui/tabs/styles (tabsListClass(), tabsParts). Set aria-selected on the tabs yourself; the CSS does the rest:

<div class="rx-tabs" data-orientation="horizontal">
  <div role="tablist" aria-label="Settings" class="rx-tabs-list rx-tabs-segmented rx-tabs-md">
    <button role="tab" id="t1" class="rx-tabs-trigger" aria-selected="true" aria-controls="p1">
      <span class="rx-tabs-label"><span class="rx-tabs-text">Account</span></span>
    </button>
    <button role="tab" id="t2" class="rx-tabs-trigger" aria-selected="false" aria-controls="p2" tabindex="-1">
      <span class="rx-tabs-label"><span class="rx-tabs-text">Password</span></span>
    </button>
    <span class="rx-tabs-indicator" aria-hidden="true"></span>
  </div>
  <div role="tabpanel" id="p1" aria-labelledby="t1" class="rx-tabs-content" tabindex="0">…</div>
  <div role="tabpanel" id="p2" aria-labelledby="t2" class="rx-tabs-content" tabindex="0" hidden>…</div>
</div>

ThemingCopy Anchor Link

Tabs read only the theme tokens.

How the motion worksCopy Anchor Link

A linear() spring is a fixed curve: switching tabs mid-glide restarts it from where the indicator is, without carrying its speed.

AccessibilityCopy Anchor Link

• tablist, tab and tabpanel roles, aria-selected, aria-controls, aria-labelledby and aria-orientation, following the WAI-ARIA tabs pattern.
• One tab stop: the selected tab (or the first enabled tab when none is). The arrow keys move along the list and wrap; Home and End jump to the ends; disabled tabs are skipped. In right-to-left text the left and right arrows swap.
• The panel is in the Tab order, so a panel with no controls can still be reached and read.
• Keyboard focus shows a 2px ring on tabs and panels.
• With reduced motion nothing slides, grows, blurs or rises; colors and panels fade in 100ms. With data-motion="off" every state changes at once.