# Shopping cart

> Cart with quantity steppers, remove with undo and free-shipping progress.

Block · Pro · https://lodeui.com/blocks/shopping-cart

## When to use

- Cart pages and drawers in stores.

## When not to use

- Single-product purchases: go straight to checkout.

## Installation

```bash
npx shadcn@latest add @lode/shopping-cart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ShoppingCart } from "@/components/blocks/shopping-cart";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ShoppingCart />
    </main>
  );
}
```

Built from: Number ticker

## API reference

### ShoppingCart

A cart with quantity steppers, remove with undo, a free-shipping progress bar and a rolling subtotal. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through steppers and remove buttons |
| Enter / Space | Change quantity or remove |

## Accessibility

- Steppers are labelled per product; the free-shipping bar is a progressbar.
- Item count and undo are announced.

## Motion

- Quantities roll; removed rows slide out and others close the gap; the shipping bar fills.

## Responsive behavior

- Remove shows as an icon on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Undo keeps the item for 5 seconds; persist removals after that.

## Related

- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.
- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.