ecommerce pattern
Cart
Cart page or drawer — line items, totals, checkout CTA.
When to use it
User views items before checkout. Drawer for inline review, page for complex carts.
- Quantity change in <2 taps
- Totals always visible
- Empty state encourages browsing
Layout regions
- container
- Drawer for inline, full page for /cart
- lines
- summary
- Subtotal, shipping est, tax, total
- cta
- Checkout button
States
- default
- Items present
- empty
- No items
- loading
- Updating quantities
- error
- Item out of stock during checkout
Example
<Sheet variant="right" size="md"><SheetHeader><SheetTitle>Your cart ({count})</SheetTitle></SheetHeader><Stack>{items.map((i) => <CartLine key={i.id} {...i} />)}</Stack><CartSummary /><Button>Checkout — {formatTotal(total)}</Button></Sheet>The full Cart pattern specifies 3 exact microcopy strings, 2 motion specs, 4 composition rules — all gated behind the full recipe. Get the full recipe.