Quantity Stepper

PreviewCode

Studio Wireless

Matte black

$249

1

$249

Installation

npx shadcn@latest add @blank/quantity-stepper

Usage

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

<QuantityStepper defaultValue={1} min={1} max={10} />

The value sits in a real input: type a number and it commits on blur or Enter, or use the arrow keys to step it. The buttons disable themselves at min and max, so the value can never leave the range.

To change an icon or a label, compose the parts yourself — the root renders the default three only when it has no children.

<QuantityStepper value={quantity} onValueChange={setQuantity} min={0}>
  <QuantityStepperDecrement aria-label="Remove one">
    {quantity === 1 ? <Trash2Icon /> : <MinusIcon />}
  </QuantityStepperDecrement>
  <QuantityStepperInput />
  <QuantityStepperIncrement />
</QuantityStepper>

Examples

Variants

secondary is a filled control for dense lists such as a cart; outline sits better on a card or next to bordered inputs.

API Reference