Segmented Control

Tabs with a springy pill that slides behind the active option, with arrow-key navigation.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/segmented-control

import { SegmentedControl } from "@/components/segmented-control"

const options = [
  { value: "day", label: "Day" },
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
]

export function Demo() {
  return (
    <SegmentedControl options={options} />
  )
}

Updates live as you change the controls. Only non-default props are included.