## Add to Cart (S—163)

An Add to cart button that morphs into a − qty + stepper after the first tap, and back to the button at zero.

- URL: https://sundaeui.dev/components/add-to-cart
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/add-to-cart.json`
- Tags: stepper, add-to-cart, quantity, morph, e-commerce, button

First tap adds one and the button reshapes into a stepper in place, keeping its width so the layout never jumps. Going down to zero morphs it back.
A small cart badge elsewhere on the card bumps with each change.

### Usage

```tsx
import { AddToCart } from '@/components/sundae/add-to-cart'

<AddToCart />
```

### Props

- `quantity / defaultQuantity` (`number`, default `0`): In-cart quantity.
- `max` (`number`, default `10`): Max per order.
- `onQuantityChange` (`(n: number) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product cards, menus, grocery lists.

### When not to use

- Products needing options (size, colour) before adding.

### Accessibility

- Idle: a button named “Add to cart”. Active: decrease / increase buttons and a live quantity.
- Focus moves to the plus button after adding so keyboard users can keep going.
- Reduced motion removes the movement and keeps every state change.