Hex UIv1

CommerceOrderSummary

Read-only order detail card: header (order id + status) + line items + totals breakdown + optional meta panel + optional actions. Distinct from commerce-cart (which is editable). Use on order confirmation / order-detail pages. Presentational and theme-driven.

Installation

pnpm
pnpm dlx @hex-core/cli add commerce-order-summary

Usage

tsx
import { CommerceOrderSummary } from "@/components/ui/commerce-order-summary"

Order confirmation card

Order header, line items, totals breakdown, meta panel, and a download action.

tsx
import { CommerceOrderSummary, Badge, Button } from "@hex-core/components";

<CommerceOrderSummary
  orderId="#1042"
  status={<Badge>Confirmed</Badge>}
  items={[
    { name: "Canvas Tote", price: "$48", quantity: 1, meta: "Natural" },
    { name: "Wool Beanie", price: "$56", quantity: 2, meta: "Charcoal" },
  ]}
  totals={[
    { label: "Subtotal", value: "$104" },
    { label: "Shipping", value: "Free" },
    { label: "Total", value: "$104", emphasized: true },
  ]}
  meta={
    <div className="flex flex-col gap-1">
      <p><strong>Placed:</strong> May 23, 2026</p>
      <p><strong>Shipping to:</strong> 123 Main St, Brooklyn NY</p>
    </div>
  }
  actions={<Button variant="outline">Download invoice</Button>}
/>

API Reference

PropTypeDefaultDescription
orderIdrequired
ReactNode—Order identifier (number / hash).
itemsrequired
object—ReadonlyArray<{ name; price; quantity; image?; meta? }>. Line items in the order — non-editable display.
totalsrequired
object—ReadonlyArray<{ label; value; emphasized? }>. Totals rows (subtotal, shipping, tax, total). Set emphasized on the final Total to visually separate it.
status
ReactNode—Optional status badge / text.
meta
ReactNode—Optional meta panel (placed date, shipping address, payment method).
actions
ReactNode—Optional trailing actions (download invoice, contact support).
className
string—Additional classes applied to the root <section>.

AI Guidance

When to use

Use on order confirmation pages, order-detail pages from the customer's order history, and email-like detail views. For an editable shopping cart, use commerce-cart instead.

When not to use

Don't use as the active cart (use commerce-cart, which has per-item controls). Don't render line items as editable rows here — this card is read-only.

Common mistakes

  • Letting the consumer mutate the items array — this block doesn't expose edit handlers; pass the immutable snapshot of the order.
  • Forgetting to mark the Total row as emphasized — without it the final total reads the same as subtotals and shipping.
  • Long meta paragraphs that dominate the card — keep meta to a few short lines.

Accessibility

The card title (Order {id}) renders as <h2>; per-item names render as <h3>. Totals use <dl>/<dt>/<dd> for label→value semantics. The emphasized Total row carries a top border so the visual emphasis matches the bold weight.

Token budget: 1127

Verified against @hex-core/components@1.14.0

Edit this page on GitHub