An add to bag button that stretches into a quantity capsule on the first tap. Digits slide in the direction you count, a +1 floats off the plus, and at one the minus turns into a trash can that folds it back.
Ceramic pour-over
Sand glaze · $38
npx shadcn@latest add https://hyperblur.dev/r/micro-quantity-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-quantity-picker.tsx.
import { MicroQuantityPicker } from "@/components/hyperblur/micro-quantity-picker"
<MicroQuantityPicker onChange={(qty) => updateCart(sku, qty)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled quantity. Pair with onChange. | |
| defaultValue | number | 0 | Initial quantity when uncontrolled. Zero shows the add button. |
| max | number | 9 | Highest quantity. Pressing plus beyond it shakes the button. |
| addLabel | string | "Add to bag" | Text of the collapsed button. |
| itemLabel | string | "item" | Noun used in the button labels for screen readers. |
| accent | string | "#2f7bff" | Add button fill, +1 color and focus ring. |
| disabled | boolean | false | Block interaction and dim the control. |
| onChange | (value: number) => void | Called with the new quantity. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element. |