# Order Tracker
> A shipment card with a live ETA, a step rail whose current stop gently pulses, carrier scans that slide in as they arrive, and a small spray of confetti when it lands.
- Page: https://devl.dev/components/order-tracker
- Kind: component · Commerce
- Install: `npx shadcn@latest add https://devl.dev/r/order-tracker.json`
- Raw source: https://devl.dev/raw/order-tracker.tsx
- npm: lucide-react, motion
- License: MIT. The coss ui components it uses (https://coss.com/ui) are AGPL-3.0.
## Usage
```tsx
"use client";
import { RotateCcwIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { type CarrierEvent, OrderTracker } from "@/components/order-tracker";
const BASE: CarrierEvent[] = [
{ id: "e4", time: "07:52", day: "Today", title: "Out for delivery", location: "Leith depot" },
{ id: "e3", time: "23:10", day: "Wed", title: "Arrived at local depot", location: "Leith depot" },
{ id: "e2", time: "14:36", day: "Wed", title: "In transit to your region", location: "Carlisle hub" },
{ id: "e1", time: "18:05", day: "Tue", title: "Picked up from Oakmoss", location: "Manchester" },
];
const LATER: { step: number; event: CarrierEvent }[] = [
{ step: 2, event: { id: "e5", time: "12:58", day: "Today", title: "Driver is 3 stops away", location: "Abbeyhill" } },
{ step: 3, event: { id: "e6", time: "13:42", day: "Today", title: "Delivered, left at front door", location: "Edinburgh EH7" } },
];
export default function OrderTrackerDemo() {
const [tick, setTick] = useState(0);
const [run, setRun] = useState(0);
useEffect(() => {
setTick(0);
const timers = [window.setTimeout(() => setTick(1), 3200), window.setTimeout(() => setTick(2), 6400)];
return () => timers.forEach(clearTimeout);
}, [run]);
const extra = LATER.slice(0, tick);
const current = extra.length ? extra[extra.length - 1].step : 2;
const events = [...extra.map((e) => e.event).reverse(), ...BASE];
return (
= 3 ? "13:42" : "By 14:00" },
]}
trackingNumber="PW 4821 7730 GB"
/>
);
}
```
## Props
| Prop | Type | Default |
| --- | --- | --- |
| `orderId` | `string` | |
| `carrier` | `string` | |
| `trackingNumber`? | `string` | |
| `steps` | `TrackerStep[]` | |
| `current` | `number` | |
| `eta` | `{ title: string; detail?: string }` | |
| `delivered`? | `{ title: string; detail?: string }` | |
| `events` | `CarrierEvent[]` | |
| `visibleEvents`? | `number` | `3` |
| `className`? | `string` | |
## Source: components/order-tracker.tsx
```tsx
"use client";
import { CheckIcon, ChevronDownIcon, CopyIcon, MapPinIcon, PackageCheckIcon, TruckIcon } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
export interface TrackerStep {
label: string;
date?: string;
}
export interface CarrierEvent {
id: string;
time: string;
day?: string;
title: string;
location?: string;
}
export interface OrderTrackerProps {
orderId: string;
carrier: string;
trackingNumber?: string;
steps: TrackerStep[];
current: number;
eta: { title: string; detail?: string };
delivered?: { title: string; detail?: string };
events: CarrierEvent[];
visibleEvents?: number;
className?: string;
}
export function OrderTracker({
orderId,
carrier,
trackingNumber,
steps,
current,
eta,
delivered,
events,
visibleEvents = 3,
className,
}: OrderTrackerProps) {
const reduce = useReducedMotion();
const [expanded, setExpanded] = useState(false);
const [copied, setCopied] = useState(false);
const [celebrate, setCelebrate] = useState(0);
const last = steps.length - 1;
const isDelivered = current >= last;
const prev = useRef(current);
const copyTimer = useRef(undefined);
useEffect(() => {
if (current >= last && prev.current < last) setCelebrate((n) => n + 1);
prev.current = current;
}, [current, last]);
useEffect(() => () => clearTimeout(copyTimer.current), []);
const copy = async () => {
if (!trackingNumber) return;
try {
await navigator.clipboard.writeText(trackingNumber);
} catch {}
setCopied(true);
clearTimeout(copyTimer.current);
copyTimer.current = window.setTimeout(() => setCopied(false), 1400);
};
const ease = [0.23, 1, 0.32, 1] as const;
const head = isDelivered && delivered ? delivered : eta;
const shown = expanded ? events : events.slice(0, visibleEvents);
const progress = Math.min(1, current / Math.max(1, last));
return (
Order {orderId}
{carrier}
{trackingNumber && (
<>
{" · "}
{trackingNumber}
)}
{trackingNumber && (
)}
{isDelivered ? : }
{head.title}
{head.detail && {head.detail}
}
{steps.map((s, i) => {
const done = i < current || isDelivered;
const active = i === current && !isDelivered;
return (
-
{active && (
)}
{done ? (
) : active ? (
) : null}
{i === last && 0 && !reduce} />}
{s.label}
{s.date && {s.date}}
);
})}
Updates from {carrier}
{shown.map((e, i) => (
{i < shown.length - 1 && }
{e.title}
{e.location && (
{e.location}
)}
{e.day && {e.day}}
{e.time}
))}
{events.length > visibleEvents && (
)}
);
}
function Burst({ run }: { run: boolean }) {
if (!run) return null;
const dots = Array.from({ length: 10 }, (_, i) => {
const angle = (i / 10) * Math.PI * 2 + 0.3;
const dist = 16 + (i % 3) * 5;
return { x: Math.cos(angle) * dist, y: Math.sin(angle) * dist, tone: ["bg-success", "bg-amber-400", "bg-info", "bg-rose-400"][i % 4] };
});
return (
{dots.map((d, i) => (
))}
);
}
```