iOS-style segmented control with a thumb that slides to the selected option.
npx shadcn@latest add https://hyperblur.dev/r/segmented-control.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/segmented-control.tsx.
import { SegmentedControl } from "@/components/hyperblur/segmented-control"
<SegmentedControl aria-label="View" defaultValue="grid" options={[{ value: "grid", label: "Grid" }, { value: "list", label: "List" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: string; disabled?: boolean }[] | required | The segments, in order. |
| value | string | Controlled selection. Pair with onChange. | |
| defaultValue | string | Initial selection when uncontrolled. Falls back to the first enabled option. | |
| onChange | (value: string) => void | Called with the newly selected value. | |
| size | "sm" | "md" | "md" | Control height and text size. |
| color | string | "rgba(255,255,255,0.18)" | Thumb color. Pass your accent, e.g. #2f7bff, for a tinted thumb. |
| fullWidth | boolean | false | Stretch to the container with equal-width segments. |