# Tabs

A React component in [Beamline](https://beamline.io/)'s [Navigation](https://beamline.io/components/navigation) category, in the free sample. Live demo: https://beamline.io/components/tabs

Switches between panels of one object; one indicator slides to the active tab, counts sit beside labels, and a long row scrolls instead of wrapping.

## Use it for

- Switching between panels of the same object: Overview, Activity, Settings; Positions and Orders.

## Not for

- Filtering the same content ([segmented-control](https://beamline.io/components/segmented-control)).
- Moving between sections of an app ([sidebar](https://beamline.io/components/sidebar)).

## Anatomy

- Tabs
- TabsList (indicator)
- TabsTrigger (icon, label, count)
- TabsContent
- TabsNav (the same row as navigation: nav, indicator)
- TabsNavItem (link or button, aria-current=page)

## Variants

- **variant**: underline, pill

## States

- active
- inactive
- hover
- disabled
- overflowing row

## Keyboard

- ← → move and activate
- Home / End jump
- Tab moves into the panel
- Direction follows explicit props or the managed scope and resolves the surrounding static direction; forwarded refs keep internal direction measurement attached. refreshAppearance updates static scope changes without remounting controls.
- TabsNav: Tab moves between items; Enter (links) or Enter and Space (buttons) follow one

## Motion

The indicator (line or pill) travels as matter (ui/lib/contour.ts), shaped by the look's mechanics (--m-morph-*): in soft its corner facing the new tab answers first, its leading edge rounds out a few pixels, the middle draws a slight neck and the corners round toward a capsule while it is stretched, then it gathers into its plain box. Nothing overshoots (critically damped, ~0.26 s, the far corner a little later). Metal, blueprint and mono stay rigid (it slides and stretches with straight edges); pop stretches most; glass is a little heavier; ink thins like a brush. The choice itself is made at once (state, colour, focus); only the decorative indicator (line or pill) settles. At rest: no clip and no frames. Reduced motion: it jumps. The new panel fades in.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue / onValueChange` | `string` | — |  |
| `TabsList variant` | `"underline" \| "pill"` | `"underline"` |  |
| `TabsTrigger icon / count` | `ReactNode / number` | — |  |
| `TabsList.classNames / TabsTrigger.classNames` | `typed part classes` | — | See visualContract.slots; existing handlers, accessibility and internal measurement refs are preserved. |
| `TabsNav / TabsNavItem` | `value, defaultValue, onValueChange, variant / value, href?, icon?, count?` | — | Tabs that switch pages or routes rather than panels: a nav with the same look and travelling indicator, the current item aria-current=page. Tab moves between items, Enter follows one. |
| `style` | `CSSProperties` | — | Visual root inline styles; Tabs exported parts each retain their native style attribute. |
| `ref` | `HTMLDivElement (Tabs/TabsList), HTMLButtonElement (TabsTrigger)` | — | Native visual root/control reference, composed with internal refs when present. |

## Dependencies

`@radix-ui/react-direction`, `@radix-ui/react-tabs`

## Import

```tsx
import { Tabs, TabsList, TabsTrigger, TabsNav, TabsNavItem, TabsContent } from "@/components/tabs/tabs";
```

## Get it

Tabs is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Tabs is in the free sample, which costs nothing. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Navigation

- [Breadcrumb](https://beamline.io/components/breadcrumb): Where a page sits and the way back up; long paths keep the first and last two levels and fold the middle into a menu.
- [Menu bar](https://beamline.io/components/menubar): A desktop-style File / Edit / View bar for editor-like apps; each menu takes the same rows as the dropdown menu, and pointing moves between open menus.
- [Navigation menu](https://beamline.io/components/navigation-menu): A site or docs header whose sections open into one panel that resizes and slides between them; NavigationMenuCard is the standard link row.
- [Pagination](https://beamline.io/components/pagination): Moves through pages of a known length: first, last and the current page's neighbours, with an optional “41–60 of 468”; a phone shows “Page 6 of 24”.
- [Sidebar](https://beamline.io/components/sidebar): The app's main navigation: sections, items with counts and one level of sub-pages, an icon rail with tooltips (⌘B, the trigger or the edge), and a sheet…
- [Stepper](https://beamline.io/components/stepper): Where someone is in a multi-step flow: done steps carry a check, the current one a ring, and the line between marks fills as steps complete.
- [Tree view](https://beamline.io/components/tree-view): Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening.
- [User menu](https://beamline.io/components/user-menu): The account menu behind the avatar: who is signed in, status, theme, account pages and sign out with progress; a bottom sheet on phones.