shadcn.io is not affiliated with official shadcn/ui
Package Tracking Map Block for React Aria
One parcel's multi-leg journey across a drawn region, with seven steps as a list of buttons, a route that is solid up to the last scan and dashed after, and a card with the place, time and what happened.
Installation
Overview
Show where one parcel is and where it will be, with this package tracking map for React with React Aria. Boxmoth, a parcel carrier, draws a coast-and-hills region of an invented country with four places (a depot, two hubs and the front door) joined by a curved route. Seven steps run down the side as buttons: label created, collected, arrived at the first hub, left it (the last scan), arrives at the second hub, out for delivery and delivery. The scanned steps have a filled mark, the three to come a dashed one, and the route is solid up to the truck, which stands just past the last scan, and dashed after it. Pressing a step, or a place on the map, rings its place and fills the card under the list with the place, the scan or expected time and what happened there. Above the map three cells give the status, the last scan and the expected window. Every time is typed against a fixed date, so nothing depends on the clock. It's built from Guides and plain buttons, with a CSS entrance only. For carriers, shops and order status pages.
FAQ
How are the solid and dashed parts decided?
The route is three curves, one per leg. TRUCK names the leg the truck is on and how far along it is, taken from the last scan; every earlier leg is drawn solid, that leg is solid for the share it has travelled, and the rest are dashed. A step counts as scanned when its time is before AS_OF.
How do I use my own shipment?
Edit PLACES (a letter, a name and a position in the drawing's 480 by 360 units), STEPS (a title, a place, an ISO time and a note), the curves in LEGS and TRUCK. The list, the card, the facts and the pins read these, and nothing needs counting by hand.
Can I use it without a mouse?
Yes. The steps are real buttons in an ordered list and the chosen one is marked as the current step; Tab moves between them and Enter or Space chooses. The place pins on the map are a pointer shortcut, and the card repeats what they would show.
Is the tracking real?
No. The hubs, times and notes are invented and the parcel never moves; the demo is a picture of what a tracking page can say. In your app fill STEPS from your carrier's events and set TRUCK from the last event's position.