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.
Shipment stepper
shipment-stepper.tsxA 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.
| 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
route-map.tsxA 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.
| 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
order-timeline.tsxTracking history newest first: events cascade in, the latest pulses, a delay shows its reason, and older updates expand in place with a layout spring.
| 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. |
Install the whole set
Installs every order tracking variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
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.