# Order tracking

> Post-purchase tracking — a shipment stepper with ETA, an SVG route map with a gliding van and a full event timeline with delays — that fill, glide and expand with springs.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/order-tracking
- Install: `npx shadcn@latest add @geturui-pro/order-tracking`
- Dependencies: motion, lucide-react

## Variants

### Shipment stepper

A large ETA, a track that springs to the live step, a pulsing current step, step details on click or arrows and a copyable tracking number.

Install: `npx shadcn@latest add @geturui-pro/order-tracking-shipment-stepper`

```tsx
import { ShipmentStepper } from "@/components/examples/order-tracking/shipment-stepper";

export function Shipment() {
  return <ShipmentStepper orderId="GU-1042" eta="Friday, Oct 9" etaWindow="Before noon" current={3} steps={steps} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| orderId | `string` | — | Order number in the header. |
| items | `{ name, initials }[]` | — | Items shown as initial tiles. |
| eta / etaWindow | `string` | — | Headline estimate and window. |
| steps | `ShipmentStep[]` | — | { label, time, detail } per step. |
| current | `number` | 2 | Index of the step in progress. |
| carrier / tracking | `string` | — | Carrier name and tracking number. |

### Route map

A map drawn in SVG with streets, river and parks; the travelled leg draws in, a van glides to its live spot and stop pins open on hover or focus.

Install: `npx shadcn@latest add @geturui-pro/order-tracking-route-map`

```tsx
import { RouteMapCard } from "@/components/examples/order-tracking/route-map";

export function LiveRoute() {
  return <RouteMapCard progress={0.8} stopsAway={2} eta="11:20 – 11:50 am" driver="Ana P." />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| route | `[number, number][]` | — | Route vertices in a 400×240 map space. |
| stops | `RouteStop[]` | — | { at, label, detail, kind } pins on route vertices. |
| progress | `number` | 0.64 | 0–1 position of the van along the route. |
| status / eta / driver | `string` | — | Footer copy. |
| stopsAway | `number` | 4 | Stops before the customer. |

### Order timeline

Tracking history newest first: events cascade in, the latest pulses, a delay shows its reason, and older updates expand in place with a layout spring.

Install: `npx shadcn@latest add @geturui-pro/order-tracking-order-timeline`

```tsx
import { OrderTimeline } from "@/components/examples/order-tracking/order-timeline";

export function History() {
  return <OrderTimeline orderId="GU-1042" events={events} initialCount={3} eta="Tomorrow by 6 pm" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| orderId | `string` | — | Order number in the header. |
| events | `TrackingEvent[]` | — | { id, date, time, title, location, note?, tone? }, newest first. |
| initialCount | `number` | 4 | Events shown before Show all. |
| eta | `string` | — | Estimated delivery caption. |
| delayLabel | `string` | "Delayed one day" | Badge shown when any event is a warning. |

## Accessibility

- Steps and map pins are buttons with labels that include status and time; the live step uses aria-current="step" and arrow keys move between steps.
- Delays are shown with a warning icon, a word and the reason, and the timeline toggle reports aria-expanded.
- Reduced motion stops the pulse rings and places the van, track fill and route at their final positions.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.