Tabs

A React component in Beamline's Navigation category, in the free sample.

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).
Moving between sections of an app (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

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 · Connect your agent