Components

Tabs

Underline navigation — wide-tracked labels with a single moving rule.

Preview

components/navigation/Tabs.jsx

The moving rule scales in from the left with the signature curve — the same treatment as the Predictor's view switcher.

Usage

src/components/ui/Tabs.tsx

tsx

import { Tabs } from "@/components/ui/Tabs";

<Tabs
  items={[
    { id: "videos", label: "Videos", count: 12 },
    { id: "writing", label: "Writing", count: 3 },
    { id: "design", label: "Design", count: 7 },
  ]}
  value={active}
  onChange={setActive}
/>

API

props

Prop	Type	Default	Description
items	{ id, label, count? }[]	—	Tab definitions; count renders as a quiet tabular figure.
value	string	—	Controlled active tab id.
defaultValue	string	items[0].id	Initial tab when uncontrolled.
onChange	(id: string) => void	—	Fires on selection.

Tokens consumed

semantic only

--color-border--color-fg--color-fg-muted--color-fg-subtle--duration-medium--ease-out-expo