BlocksCart Drawer

Blocks

Cart Drawer

Right-anchored slide-in panel (components/blocks/cart-drawer.tsx) shown after adding an item — free-shipping progress and the estimated total recompute live as you adjust quantity or remove a line item.

Composed ofButton

Configurator

Usage

<CartDrawer
  open={open}
  onClose={() => setOpen(false)}
  items={items}
  recommended={recommended}
  freeShippingThreshold={25}
/>

Props

PropTypeDefaultDescription
openboolean—Controls visibility.
onClose() => void—Called on Escape, backdrop click, or the close button.
itemsCartLineItem[]—Initial line items; the drawer manages its own local quantity/remove state from here.
recommendedCartRecommendedItem[][]"You may also like" row; each has its own add-to-cart icon.
freeShippingThresholdnumber25Subtotal at which the progress bar fills and the message switches to unlocked.

Do's and Don'ts

Do

  • ·Open the drawer immediately after a successful add-to-cart action, not as a general-purpose cart icon click target.
  • ·Keep recommended to 2–4 items — it's a supplementary row, not a second grid.

Don't

  • ·Don't pass a freeShippingThreshold of 0; the progress math divides by it and the bar reads as permanently full.
  • ·Don't rely on the drawer to persist cart state across a page navigation — its line items reset from the items prop every time it reopens.