Shipping Tracker
Order tracking with a truck driving the real route, turning with the road, ticking off stages.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The truck follows an SVG path with getPointAtLength and rotates to the path's tangent; checkpoints and the stage list update as it passes. Feed `progress` from your API.
Installation
$ npx shadcn@latest add https://guetix.com/r/shipping-tracker.json
Uses the shadcn CLI. It creates components/guetix/shipping-tracker.tsx and installs nothing else.
Usage
example.tsx
import { ShippingTracker } from "@/components/guetix/shipping-tracker";
export default function Example() {
return <ShippingTracker />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orderId | string | — | Order number. |
| stages | { label; time? }[] | — | Stages. |
| progress | number | — | 0–1 (omit to auto-play). |
| eta | string | — | ETA text. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Current status is a live region; stages are an ordered list.