# Order tracking

> Shipment tracking with a route map, moving van, stepper and event timeline.

Block · Pro · https://lodeui.com/blocks/order-tracking

## When to use

- Order status pages and post-purchase emails' landing pages.

## When not to use

- Real-time fleet tracking: use a map library.

## Installation

```bash
npx shadcn@latest add @lode/order-tracking
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { OrderTracking } from "@/components/blocks/order-tracking";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <OrderTracking />
    </main>
  );
}
```

## API reference

### OrderTracking

Shipment tracking with a route map and moving van, a delivery stepper, an event timeline and a copyable tracking number. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach copy and stage preview buttons |

## Accessibility

- The map is decorative; the stepper marks the current stage with aria-current="step" and the timeline repeats it as text.

## Motion

- The route fills and the van drives along it with a spring; steps and updates animate in.

## Responsive behavior

- The map scales with its width; labels stay readable at 320px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
- The van is positioned from the SVG path itself, so it always sits on the line.

## Notes for AI

- Remove the stage preview buttons in production; drive current from your carrier's status.

## Related

- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Stepper](https://lodeui.com/components/stepper) — Horizontal or vertical steps with animated progress and back-navigation.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.