Add opens into a quantity stepper in place.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/add-to-cart-buttonPlayground
Quantities
1
3
At the limit
9
Disabled
3
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/add-to-cart-button
Quantities
At 0 it shows Add. From 1 it opens into a stepper, and minus becomes a bin at 1.
1
3
Motion
Accessibility
- The count is announced as it changes.
- Minus is named Remove at one.
Motion
- The width eases from 80 to 108 px.
- Holding a step repeats after 380 ms, speeding up from 150 to 55 ms.
- Digits roll.
- With reduced motion, the press scale is off and color changes stay.
Responsive behavior
- Height steps up on Mobile through the size tokens.
Performance
- Digits roll one by one, so only characters that change move.
- Hold to repeat runs on a single timer, cleared on release, at the limit and on unmount.
- The stepper width is animated by Motion between two fixed sizes, 80 and 108 px.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/add-to-cart-button.
- Pass value and onValueChange to control it. 0 shows Add and any higher value shows the stepper.
- max defaults to 9 and values clamp between 0 and max. The tip always reads Limit 9 per order, with your max.
- label should be one short word: the closed button is 80 px wide.
Related
Cart ButtonComponentA mini cart with item rows, a rolling subtotal and a Checkout that stays disabled while empty.Product DetailsComponentExpandable Text and Review Card composed into a product block.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Amount PadComponentA send money keypad. The amount grows as you type and the send button carries it.Save ButtonComponentA bookmark that files into collections.