Mechanics

Number Stepper

Rolling digit counter with tactile plus-minus controls and spring recoil.

Installation

Coming soon. Components will be available via the registry once checkout goes live.

const [qty, setQty] = useState(1);

<NumberStepper value={qty} onChange={setQty} min={1} max={99} />

Prop	Type	Default	Description
value*	number	—	Current numeric value (controlled).
onChange*	(value: number) => void	—	Fired on increment, decrement, or keyboard step.
min	number	-Infinity	Lower bound. Decrement disables at this value.
max	number	Infinity	Upper bound. Increment disables at this value.
step	number	1	Step amount for ArrowUp / ArrowDown.
size	"sm" \| "md" \| "lg"	"md"	Visual scale of the digits and step buttons.
label	string	"Quantity"	Accessible label exposed to screen readers.
className	string	—	Tailwind classes merged onto the root container.

Cart quantity
Adjust line-item quantity in a checkout drawer or product page.
Pricing calculator
Pick seat counts on a SaaS pricing page where the digits should feel weighty.
Reservations
Choose number of guests for a booking flow where every tap should feel deliberate.
Inventory adjustments
Admin dashboards where staff bump stock counts and want unambiguous tactile feedback.