Planes

Components

Controls

Segmented Control

Free

Segmented tabs with a pill that stretches as it moves and settles into the selected tab.

All components

Installation

FreeNo license required.
npx shadcn add https://planes.ashishgogula.in/r/segmented-control.json
const [tab, setTab] = useState("overview");

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

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.