# Commerce Order Tracking

Order tracking page in an online store with statuses, ETA and the carrier's route map.

- id: `commerce-order-tracking`
- Page: https://agentic-ui-kit.com/components/commerce-order-tracking
- Live preview: https://agentic-ui-kit.com/live/component/commerce-order-tracking

## Install

```bash
agentic-ui add commerce-order-tracking
npx shadcn@4.17.0 add @agentic-ui/commerce-order-tracking
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-timeline, progress-percent, exception-states, tracking-event-log, route-map-optional, map-toggle, copy-tracking-number, eta-relative-label, line-items-summary, shipping-address, empty-state, error-state-retry, keyboard-navigation, reduced-motion-fallback
- **Intents:** track-status, explore-detail, monitor-live
- **Suits domains:** ecommerce, operations, travel, saas
- **Interaction:** map-toggle, copy-to-clipboard, expand-collapse, retry, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** order tracking page in an online store with statuses, ETA and the carrier's route map, B2B shipment detail with hub checkpoints and a delay notice due to an incident, tracking delivery of spare parts or equipment in field operations, status of luggage or a shipment in a travel marketplace with intermediate stops
- **Avoid when:** listings of many orders (use ecommerce-order-list), return flows with item selection (use commerce-returns-flow), precise geographic maps with real tiles (use ecommerce-shipment-tracker-map)
- **Preserve when adapting:** six-stage-lifecycle-model, timeline-state-semantics, route-map-projection, live-announcements, empty-error-states
- **Replace when adapting:** order-and-route-fixtures, stage-labels-and-copy, locale-timezone-currency, support-action-handlers, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, progress, alert, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, lib-tokens