‹ components

Tabs

stablev1.0.0·open in canvas

Lane generalized: the same segmented control, with Radix Tabs panels + keyboard.

Installnpx shadcn add @cids/tabs
Live demo

NVDAx leads tokenized-equity volume…

Motion · tap to replay

honors reduced-motion

Segment transition on `--motion-fast` (bg/color/shadow); panels swap instantly.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Tabs } from "@/design-system";

<Tabs value={tab} onValueChange={setTab} tabs={[
  { value: "news", label: "News", content: <NewsList /> },
  { value: "kpis", label: "KPIs", content: <KpiGrid /> },
]} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Lane generalized: the same segmented control, with Radix Tabs panels + keyboard.

Anatomy

[ News ][ KPIs ]   <- Lane-style segmented list
+----------------+
| active panel   | <- Radix Content, pt-3
+----------------+

Props

PropTypeDefaultNotes
tabsTab<T>[]--{value,label,content}.
value / onValueChangecontrolled pair--
classNamestring--cn-merged onto the root.

Use Lane for a pure value switch (no panels); Tabs when segments own content.

Motion

Segment transition on --motion-fast (bg/color/shadow); panels swap instantly.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.