CommerceCart
Shopping cart layout: a list of line items on the left and a sticky order summary on the right (stacked on mobile). Presentational and theme-driven — pass quantity steppers / remove buttons as per-item controls and the totals as summary.
Canvas Tote
$48.00Natural · Medium
Qty 1Wool Beanie
$56.00Charcoal
Qty 2Leather Cardholder
$64.00Saddle
Qty 1
Installation
pnpm dlx @hex-core/cli add commerce-cartAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | object | — | ReadonlyArray<{ name; price; quantity; image?; meta?; controls? }>. Cart line items. quantity renders as text; pass an editable stepper + remove button via per-item controls. |
summary | ReactNode | — | Order summary rows (subtotal, shipping, total) — pass your own markup. |
actions | ReactNode | — | Primary action(s) (proceed to checkout) — pass a <Button>. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use for the shopping cart page. Pass per-item quantity steppers and remove buttons via controls, and the totals via summary. Wire the checkout Button in actions.
When not to use
Don't use for a mini-cart popover (use a popover/sheet with a compact list) or for checkout itself (use commerce-checkout). Don't embed totals logic in the block — pass computed values.
Common mistakes
- Rendering quantity as a static number with no way to edit — pass a stepper via controls for an editable cart.
- Putting the order total in items instead of summary, so it scrolls away with the list.
- Missing alt text on item thumbnails.
Accessibility
Each line item name renders as an <h3>. The summary card is sticky on desktop so totals stay visible. Per-item controls you pass must carry accessible names (e.g. 'Remove Canvas Tote').
Related components
Token budget: 700
Verified against @hex-core/components@1.12.0