Number Stepper
Quantity stepper with press-and-hold acceleration, rolling digits and arrow keys.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
NumberStepperProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | — |
| defaultValue | number | 0 | — |
| onChange | (value: number) => void | — | — |
| min | number | 0 | — |
| max | number | 99 | — |
| step | number | 1 | — |
| label | string | "Quantity" | — |
| unit | string | — | Shown after the number, e.g. "kg" |
| size | "sm" | "md" | "lg" | "md" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/number-stepper.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.