# Order Tracking Timeline block

> Order receipt with vertical fulfillment Timeline, Paid status hero, and items plus totals breakdown

Order receipt pairing a vertical fulfillment Timeline (placed to delivered, with Track CTA) and a details pane: items, totals, Ship To, Bill To, Payment. ReUI Timeline, Badge; shadcn Card, Button. For order status, shipping tracking, invoice page.

- Type: Pro block
- Category: [Receipt](https://web.dev.reui.io/blocks/ecommerce/receipt.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/receipt/receipt-2
- MCP: `get_block("receipt-2")`
- Built with: Badge, Button, Card, Item, Separator, Timeline
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An order journey of 5 steps from placed to delivered, sticky beside the items, with a Next Step box and tracking number

## Agent notes

- Dot colors and the Next Step box read each `status` in `EVENTS`, while `CURRENT_STEP_INDEX` separately feeds Timeline `defaultValue`, so update both together
- Only the `current` event surfaces its `cta` in the Next Step box; the `description` on each entry of `EVENTS` is never rendered
- The tracking number exists only inside the `meta` string of the shipped entry in `EVENTS`, with no tracking field to bind

## When not to use

- A purchase order received line by line by warehouse staff with a note log: use [PO Receiving](https://web.dev.reui.io/blocks/solutions/inventory/solution-inventory-4.md) (`get_block("solution-inventory-4")`)

## Install

```bash
npx shadcn@latest add @reui/receipt-2
```

## About Receipt blocks

### When to use

- The order confirmation a shopper lands on after checkout, with items, discount, tax, total and card used
- A proof of purchase the shopper can download, email to themselves or print
- An order page after purchase for tracking the parcel, buying again, starting a return or writing a review

### When not to use

- Staff side order review, tracking or a shipping label inside a stock operations tool: use the [Inventory blocks](https://web.dev.reui.io/blocks/solutions/inventory.md)
- A history of many payments or transactions, one signed amount on each row: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- Invoices, subscriptions and dunning run by finance staff, not one shopper's order: use the [Billing blocks](https://web.dev.reui.io/blocks/solutions/billing.md)

### Agent notes

- `TOTALS` and each item's `lineTotal` in data.ts are typed in, never computed from `quantity` and `unitPrice`; derive them from your order
- Download and Email only dispatch a `CustomEvent` on `window` and Print calls `window.print`, so nothing builds a PDF or sends mail
- `formatCurrency` is fixed to en-US and `ReceiptTotals` types `currency` as USD only; widen both to show another currency

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.