Controls

Segmented Control

Elastic segmented tabs with a velocity-aware pill that glides into place.

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

const [tab, setTab] = useState("overview");

<SegmentedControl
  options={[
    { label: "Overview", value: "overview" },
    { label: "Activity", value: "activity" },
  ]}
  value={tab}
  onChange={setTab}
/>

Props

Prop	Type	Default	Description
options*	SegmentedControlOption[]	—	Tabs to render. Each option needs `label` and `value`; an optional `icon` renders inline.
value*	string	—	Currently selected option value (controlled).
onChange*	(value: string) => void	—	Fired when a tab is selected via click or keyboard.
className	string	—	Tailwind classes merged onto the tablist container.

Use cases

Dashboard view switcher
Toggle between Overview / Analytics / Activity panels without a full route change.
Settings sub-sections
Group related preference panes — Profile, Account, Billing — under one screen.
Filter modes
Switch list density, sort order, or time range on a data view.
Pricing toggle
Switch monthly / yearly billing or currency on a pricing page with a clear active state.