# Commerce Cart Drawer

Storefront side cart opened from the header bag icon after add-to-cart.

- id: `commerce-cart-drawer`
- Page: https://agentic-ui-kit.com/components/commerce-cart-drawer
- Live preview: https://agentic-ui-kit.com/live/component/commerce-cart-drawer

## Install

```bash
agentic-ui add commerce-cart-drawer
npx shadcn@4.17.0 add @agentic-ui/commerce-cart-drawer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** side-drawer-cart, quantity-stepper, stock-clamped-quantities, remove-with-undo, upsell-suggestions, free-shipping-progress, shipping-estimate, postal-code-validation, async-rate-adapter, order-summary, checkout-handoff, empty-loading-error-states, live-region-announcements
- **Intents:** manage-collection, execute-flow
- **Suits domains:** ecommerce, travel, culinary, wine, books
- **Interaction:** quantity-stepper, remove-undo, upsell-add, shipping-estimate, method-selection, checkout-handoff
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Storefront side cart opened from the header bag icon after add-to-cart, Wine shop cart that nudges toward a free-shipping threshold with pairing upsells, Meal-kit or bookstore order review with delivery estimate before checkout, Travel add-ons basket with quantity steppers and a checkout handoff
- **Avoid when:** Single-item instant purchase flows where a buy-now button is enough, Carts with complex B2B pricing (tiered quotes, approvals) that need a full page, Final checkout with payment capture; this component only hands off to checkout
- **Preserve when adapting:** stock-clamped-steppers, undo-after-remove, sticky-order-summary, async-shipping-adapter-contract, focus-management
- **Replace when adapting:** product-fixtures, rate-table, free-shipping-threshold, currency-locale, upsell-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** sheet, button, badge, input, label, progress, separator, skeleton
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives