A quantity stepper with plus and minus buttons, digits that roll like an odometer and hold to repeat with acceleration.
Boston fern in clay
6 inch pot, ships Tuesday
Subtotal
$68
npx shadcn@latest add https://hyperblur.dev/r/stepper-number.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stepper-number.tsx.
import { StepperNumber } from "@/components/hyperblur/stepper-number"
<StepperNumber defaultValue={2} min={1} max={20} onValueChange={(qty) => console.log(qty)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. Pair with onValueChange. | |
| defaultValue | number | 1 | Initial value when uncontrolled. |
| onValueChange | (value: number) => void | Called with the new value on every step. | |
| min | number | 0 | Lowest value. The minus button disables here. |
| max | number | 99 | Highest value. The plus button disables here. |
| step | number | 1 | Amount per press. Use whole numbers. |
| label | string | "Quantity" | Accessible name of the stepper. |
| size | number | 44 | Height in pixels. |
| holdDelay | number | 420 | Milliseconds before holding a button starts repeating. |
| repeatInterval | number | 90 | Starting milliseconds between repeats. It shortens the longer you hold. |
| accent | string | "#2f7bff" | Hover and press color. |
| disabled | boolean | false | Disable the stepper. |
| name | string | Adds a hidden input with the current value. |