Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn order header with a bordered details grid, a status lozenge and a large total figure, laid out so the money reads first on narrow screens.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when you show one order, invoice or booking and the money and status are the headline.
Do not use it when you list many orders (use a table) or the page is mostly line items (use an invoice layout).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Required | Description |
|---|---|---|---|
orderNumber | string | required | - |
status | { label: string; appearance: LozengeAppearance } | required | - |
placed | string | required | - |
customer | string | required | - |
shipTo | string | required | - |
paymentMethod | string | required | - |
total | number | required | - |
currency | string | optional | - |
locale | string | optional | - |
The pattern ships with a Testing Library test (order-summary-descriptions.test.tsx) that covers the region name, the status text, locale and currency formatting and the description list.