# Tabs

Kit v2 tab strip for page or section navigation (customer Overview / Addresses / Fit quiz / GDPR). 40px tall, a 2px navy underline on the current tab, counts in `em`. Scrolls sideways on the phone.

- **Group:** Navigation and shell · **family:** `page-primitives` · **shadcn:** Tabs
- **Build:** shadcn `Tabs` (Radix) restyled as an underline strip.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Nouns; counts only if useful.

## Do

- Use route tabs when each tab deserves a URL.

## Don't

- Use tabs to switch a control mode: that is Segmented.

## Accessibility

- **Keyboard:** ← → move between tabs (kit.js / Radix); Tab moves into the panel.
- **ARIA:** `role="tablist"` / `tab` / `tabpanel`, `aria-controls`, `aria-selected`.
- **Focus:** 2px ring, 4px radius.

## Tokens

`--s-5` `--border` `--s-2` `--tab-h` `--w-medium` `--text-body` `--font-voice` `--muted-foreground` `--motion-hover` `--foreground` `--w-semibold` `--r-pill` `--primary` `--ring` `--r-chip` `--text-micro` `--font-ui` `--s-4` `--tab-h-m`

## Files

`tabs.html` live specimen · `tabs.css` kit rules · `tabs.d.ts` props · full page: `docs/components/tabs/` (phone: `m/`).