Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn order shown as semantic term and definition pairs: formatted dates and money, a status badge with text, a copyable order number and an address block, in two columns that collapse on small screens. Use this when a details page is read far more than it is edited.
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.
A detail view of a record (order, invoice, shipment, subscription) must be easy to scan and to read with a screen reader.
Do not use it when: For records people edit all the time, use a form. For comparing many records, use a table.
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 | Description |
|---|---|---|
order | Order | { id, placedAt, status, total, currency, paymentLast4, shipTo }. |
locale | string | For date and money formats. Default en-US. |
section named by the order number; inside, a dl of dt/dd pairs, which screen readers announce as "Total, 129.90 euros". Dates use time with a machine-readable value; the address uses address.The pattern ships with a Testing Library test (order-summary-description-list.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.