All components
Number Stepper
InputsQuantity stepper whose number pops in the direction it moved.
2
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/number-stepper.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/number-stepper.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 1 | Initial value. |
| min | number | 0 | Lower bound; the minus button disables here. |
| max | number | 99 | Upper bound; the plus button disables here. |
| onChange | (value: number) => void | - | Called with the new value after each step. |
Accessibility
- Both buttons carry aria-labels rather than relying on the icons.
- Buttons disable at the bounds instead of silently doing nothing.
- Tabular numerals keep the width stable as digits change.
Dependencies
motionclsxtailwind-mergelucide-react