A stepper whose value pill works like a spring joystick: pull it left or right and it counts, faster the farther you pull, then snaps back. Hitting a limit bumps the number and buzzes on phones.
Table at Osteria Lume
Fri, Nov 14 · 8:30 PM
npx shadcn@latest add https://hyperblur.dev/r/micro-spring-stepper.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-spring-stepper.tsx.
import { MicroSpringStepper } from "@/components/hyperblur/micro-spring-stepper"
<MicroSpringStepper defaultValue={4} max={20} unit="guests" onChange={setGuests} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. Pair with onChange. | |
| defaultValue | number | 2 | Initial value when uncontrolled. |
| min | number | 0 | Lowest value. |
| max | number | 12 | Highest value. |
| step | number | 1 | Amount added or removed per tick. |
| label | string | "Guests" | Accessible name of the spin button. |
| unit | string | "guests" | Unit shown under the number and used in button labels. |
| accent | string | "#2f7bff" | Pull direction glow, rate bar and focus ring. |
| disabled | boolean | false | Block interaction and dim the control. |
| haptics | boolean | true | Use navigator.vibrate on each tick where supported. |
| onChange | (value: number) => void | Called with every new value. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element. |