ns-ui
Segmented control with a visibly grabbable pill (grip dots, hover lift) — fling it, it coasts on real release velocity, rubber-bands off the ends, and snaps into the nearest detent. Optional one-shot intro fling demos the mechanic on first view.
Use when a small horizontal set of exclusive views where the pill itself should be grabbable and coast to the nearest detent on release, while click and keyboard stay instant no-drag paths; pick radio-group-pin instead when the options stack vertically and their order carries meaning, or view-toggle-rails when switching also has to rearrange the content behind it.
Install
npx shadcn add https://design.helpmarq.comns-ui / segmented-control-fling — grab the pill, fling it
5 tasks · 2 in progress
view / list · updated 2 min ago
sprint ends Jul 25
Click a segment and it switches instantly. Or grab the pill (the raised tab with the grip dots), throw it, and it coasts, bounces off the ends, and snaps into the nearest segment. Arrow keys work too.
| Prop | Type | Default | Description |
|---|---|---|---|
| options? | FlingSegmentOption[] | DEFAULT_OPTIONS | — |
| value? | string | — | controlled value; omit for uncontrolled |
| defaultValue? | string | — | — |
| onValueChange? | (value: string) => void | — | fires once per selection change — on detent commit, never per-frame |
| introFling? | boolean | false | opt-in one-shot self-demo: a beat after mount the pill is flung to the far segment, coasts, and captures into the detent. Plays exactly once, never loops, is skipped under reduced motion, and is permanently cancelled by any pointer or keyboard interaction. |
| className? | string | — | — |
| aria-label? | string | "View" | — |