Delivery tracker
ProA live order tracker whose marker glides between stops while the arrival time rolls.
Packed
Waiting for pickup in Altstetten
- Ordered, complete
- Packed, current
- Out for delivery
- Arriving
- Delivered
Updates
- PackedTwo items wrapped and labeled
- Order confirmedHalden Studio accepted your order
Halden Studio
2 items
Oak lounge chairNatural oak, white glove delivery
Glass carafe setCarafe and two tumblers
Seefeldstrasse 118, 8008 Zürich
Packed. Waiting for pickup in Altstetten. Estimated arrival 14:45.
- Order status pages that follow a delivery from dispatch to door.
- Tracking screens with a live arrival time and an event history.
- Deliveries where people can message or call the courier.
- Use timeline for a static list of past events.
- Use progress when a single percentage is enough.
- Use support-conversation for a full chat with support.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on an order status page. Feed it updates from your carrier or dispatch webhooks and connect the courier contact options to your messaging and masked calling service; the preview is simulated.
import { DeliveryTracker } from "@/components/arc/blocks/delivery-tracker/delivery-tracker"; export default function OrderPage() { return ( <main> <DeliveryTracker className="order-status" /> </main> );}DeliveryTracker
An order status card with a route progress bar, rolling arrival time, event history, and a courier contact panel for quick replies and calls. The order, courier, and updates are simulated.
classNamestring–Extra class on the root element.- Stage changes and arrival updates are announced through a polite live region.
- Quick replies are a labelled group, and the courier typing indicator is a role="status" with a label.
- Call status text updates in its own polite live region.
- The marker glides between stops while the arrival time rolls.
- The contact button morphs into the contact panel through a shared layoutId.
- Reduced motion makes the marker and panel morph instant.
- Below 760px container width the courier, updates, and order stack in one column.
- Below 560px the hero stacks and only the current stop keeps its label on the route bar.
- The call timer interval runs only during a call, and a ResizeObserver positions the route marker.
- Shared layoutIds morph the contact button into its panel; nothing animates while idle.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on an order status page.
- Replace the simulated timeline with updates from your carrier or dispatch webhooks, and swap the sample product photos.
- Connect message and call actions to your messaging and masked calling service; composes Arc avatar, button, and text-morph.
The full library index for assistants is at /llms.txt.