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
- lines
- summary
- cta
States
- default
- empty
- loading
- error
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.