An order status section with a stylized city map where a courier van drives the route to a pulsing pin, an ETA card, a delivery timeline and the items in the parcel.
Order #HB-48213
npx shadcn@latest add https://hyperblur.dev/r/shop-order-tracking.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-order-tracking.tsx.
import { ShopOrderTracking } from "@/components/hyperblur/shop-order-tracking"
<ShopOrderTracking currentStep={3} onContactCourier={(c) => console.log(c)} />| Prop | Type | Default | Description |
|---|---|---|---|
| orderId | string | "Order #HB-48213" | Order reference above the title. |
| title | string | "Your order is on its way" | Section heading. |
| eta | string | "2:40 – 3:10 pm" | Delivery window in the ETA card. |
| etaNote | string | "Arriving today" | Small text above the window. |
| events | { label: string; detail: string; time: string }[] | 5 sample events | Timeline steps from first to last. |
| currentStep | number | 3 | Index of the step in progress. Earlier steps show as done. |
| courier | { name: string; vehicle: string; rating: string } | { name: "Diego Ramos", vehicle: "Electric van · NL-482-K", rating: "4.98" } | Courier card over the map. |
| items | { name: string; variant: string; qty: number; color?: string }[] | 2 sample items | Items in the parcel. Pass an empty array to hide. |
| address | string | "Keizersgracht 214, 1016 DZ Amsterdam" | Delivery address. |
| duration | number | 14 | Seconds for one loop of the van animation. |
| accent | string | "#38bdf8" | Color of the route, pin and active step. |
| onContactCourier | (channel: "call" | "message") => void | Called by the call and message buttons. |