Order trackingPro

• Route map with moving van
• Delivery stepper
• Event timeline
• Copy tracking number

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

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

Import it from @/components/blocks/order-tracking after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { OrderTracking } from "@/components/blocks/order-tracking";

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

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

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

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

• 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.

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