Back to components
Commerce component

Order Summary

Line items + subtotal / shipping / tax / discount breakdown and grand total.

Install

What it does

  • Auto-calculated subtotal from line items (or override)
  • Shipping, tax, discount rows shown only when provided
  • Discount line highlighted in success color
  • totalsOnly variant hides items (e.g., for cart confirmation)
  • Free-shipping label when shipping = 0

When to use

Use it

Cart screen, checkout review, order confirmation, receipts.

Skip it

Single-item displays (use price-display).

Files & routes added

  • components/commerce/order-summary.tsx

Related components