# Add-to-Cart Drawer block

> Mini Cart Slide-Out Sheet Drawer with Just Added Confirmation and Free Shipping Progress

Add-to-cart mini cart drawer highlighting the just-added line with a success Badge, ButtonGroup quantity steppers, free-shipping Progress bar, subtotal, and Checkout. ReUI Badge, shadcn Sheet, Item, ScrollArea. Ecommerce side cart, slide-out basket.

- Type: Pro block
- Category: [Shopping Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-7
- MCP: `get_block("shopping-cart-7")`
- Built with: Badge, Button, Button Group, Empty, Item, Progress, Scroll Area, Sheet
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

The first line pinned in a success tinted card with a time stamp above an Also In Your Cart group, for confirming an add

## Agent notes

- `open` starts true so the `Sheet` shows on load; set it from your add to cart action instead of the Open Cart trigger alone
- `justAddedLine` is always the first entry of `lines` and its time is the literal `JUST_ADDED_TIMESTAMP`; put the newest add first and format a real time
- The footer View Cart and Checkout buttons are fixed anchors rendered through the Button `render` prop; set their `href` to your routes

## When not to use

- A small popover under a header basket button, not a side panel: use [Cart Dropdown](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-6.md) (`get_block("shopping-cart-6")`)
- A side panel for a form or a record, with no prices, quantities or order totals: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)

## Install

```bash
npx shadcn@latest add @reui/shopping-cart-7
```

## About Shopping Cart blocks

### When to use

- A cart page where shoppers change quantities, remove lines and see the totals before paying
- A mini cart that drops from a header Cart button or slides in from the side after an add

### When not to use

- Rows of funds, coins, transactions or integrations, with no quantities or order total: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- A side panel over an app page for a record, a form or an assistant, with no prices: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)
- Taking contact, shipping address and card details to place and pay for the order: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- Lines live in local `useState` seeded from `CART_ITEMS` or `CART_LINES` in data.tsx; read them from your cart store and write each quantity change back
- The empty state's Restore Sample Cart button reloads the demo lines through `handleRestoreCart` or `handleRestore`; point it at your catalog
- Each priced file declares its own `formatCurrency` fixed to en-US and USD; change every copy to show another currency or locale

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.