caliper uidocs
DemoSign inGet Pro

Order tracker

Pro

Where an order is: finished stages ticked, the line filling to the current one with the van moving along it, and the next stage's time.

Installs components/ui/order-tracker.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/order-tracker

Arriving today, 14:00–16:00

  1. Ordered, doneSat 18:02
  2. Packed, doneMon 09:15
  3. On the way, in progressToday 08:40
  4. DeliveredExpected 14:00

When to use #

Use it for

  • Deliveries, shipments and service visits.
  • Any process customers wait on in stages.

Skip it when

  • Internal workflows; use the step loader or timeline.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/order-tracker

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { OrderTracker } from "@/components/ui/order-tracker"

The worked example comes with Pro

The 28-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

OrderTracker

component
PropTypeDefaultDescription
stages *readonly OrderStage[]—
current *number—Index of the stage in progress.
progressnumber0.50 to 1: how far along the current stage is, e.g. distance driven.
etastring—e.g. "Arriving today, 14:00–16:00"
classNamestring—

Accessibility #

It exposes status semantics, with aria-label, aria-hidden and aria-current kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.