# Cart Dropdown block

> Quick Cart Dropdown Menu with Per-Row Quantity Steppers and Live Subtotal

Mini-cart popover from a Cart button with count Badge: rows with thumbnail, variant, a quantity stepper driving a live subtotal, View Cart, Checkout, and an Empty state. DropdownMenu, ScrollArea, ButtonGroup, Item, Button. For header cart preview.

- 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-6
- MCP: `get_block("shopping-cart-6")`
- Built with: Badge, Button, Button Group, Dropdown Menu, Empty, Item, Scroll Area
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A dropdown anchored under a Cart count button, its compact lines in a height capped scroll area above a subtotal footer

## Agent notes

- `DropdownMenu` opens with `defaultOpen` and a `useEffect` blurs the first focus; remove both for a real header cart
- `handleDecrease` removes the line when its quantity is 1, so the minus button doubles as Remove; save that removal in your store
- View Cart and Checkout are fixed anchors rendered through the Button `render` prop; set their `href` to your cart and checkout routes

## When not to use

- A drawer that slides in from the right edge right after an add: use [Add-to-Cart Drawer](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-7.md) (`get_block("shopping-cart-7")`)
- Plain text actions in a popup, with no prices, thumbnails or quantities: use [Dropdown Menu](https://web.dev.reui.io/components/dropdown-menu.md) (`get_component("dropdown-menu")`)

## Third-party libraries

- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt)

## Install

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

## 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.