Primitives

Quantity Stepper

A controlled quantity input with accessible increment and decrement buttons that clamp to min and max.

input

controls

accessible

Preview

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add quantity-stepper

Import

import { QuantityStepper } from "@/components/lumo/quantity-stepper"

Example

const [qty, setQty] = useState(1)

<QuantityStepper value={qty} onValueChange={setQty} min={1} max={9} />

Prop	Type	Default	Required
value	number	-	Required
onValueChange	(value: number) => void	-	Required
min	number	1
max	number	-
disabled	boolean	-
size	"sm" \| "md"	"md"
label	string	-

All props accept standard HTML attributes unless otherwise specified.

npm packages

lucide-react

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.