Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Order Tracking, animated React component

A live delivery tracker on a real-looking city map. A courier puck leaves the Pickup marker and rides a blue route with direction arrows to the Drop-off pin on the door, pausing at the drop-offs before yours while the ridden part fills in behind it; its arrow turns at every corner. The arrival time rolls down digit by digit, stages check off, live updates drop into a feed, and on arrival a proof-of-delivery card lands. Hover the map for what is at each point, and a stage for its detail. Shows the delivered state under reduced motion.

  • Pro
  • Dashboards
  • Scroll
  • Hover

Props

PropTypeDefaultWhat it does
orderIdstring"Order NX-4182"Small line at the top of the panel.
orderTitlestring—What is being delivered.
addressstring—Delivery address, shown in the live chip and on the drop-off pin.
courier{ name; initials; rating?; vehicle? }—Who is riding.
stagesOrderTrackingStage[]—Stages in order, each { name, when?, detail? }. The last one checks on arrival.
updatesOrderTrackingUpdate[]—Feed lines, each dropping in at a fraction of the route (at) or at a stop (stop).
etaMinutesnumber14Minutes on the clock when the ride starts.
startTime[hour, minute][12, 2]Clock time the ride starts at.
durationMsnumber19000How long the ride takes on screen, not counting the stops.
autoplaybooleantrueRides when it scrolls into view and starts over a few seconds after arriving.
onMessage() => void—Message button. Without it a sample note shows.
onCall() => void—Call button. Without it a sample note shows.
classNamestring—Classes for the section.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Order Tracking is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Order Tracking works

A live delivery tracker. A courier rides a street map to the door, pausing at the drop-offs before yours while the route fills in behind them. The arrival time rolls down digit by digit, stages check off, updates drop into a feed, and on arrival a proof-of-delivery card lands. Hover the map for what is

The source, the install command and the build prompt come with Pro.

More dashboards