Order trackingPro

Where a parcel is: the arrival day, a rail filled to the parcel, delivery problems and the scan history.

Markdown

On this page

ProOn the road between depots, with the scan history a click away.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/order-tracking

Usage

tsx

import { OrderTracking } from "@/components/ui/chatcn/pro/order-tracking"

<OrderTracking
  status="in-transit"
  progress={0.6}
  etaDay="Thursday"
  etaDetail="6 Nov, 10:00 to 14:00"
  carrier="Parcelway Ground"
  trackingNumber="PW 4471 0932 8810"
  events={scans}
/>

The answer comes first and large: Arriving Thursday, Delivered today at 11:08, or Needs attention in amber with what happens next. The rail has four stops; in-transit fills past Shipped by progress and rides a small truck at the front, so a parcel between depots looks between depots. exception stops the rail at exceptionStep with an amber mark. The carrier row holds the tracking number with copy, map and carrier links, and the scan history folds under it, newest first.

Examples

States

ProOut for delivery, a failed attempt, delivered, ordered, loading and error.

Props

Prop	Type	Notes
`status`	`"ordered" \| "shipped" \| "in-transit" \| "out-for-delivery" \| "delivered" \| "exception"`	Where it is
`etaDay`, `etaDetail`, `deliveredAt`	`string`	Formatted by you
`progress`	`number`	0 to 1 along the road, for `in-transit`
`exception`, `exceptionStep`	`ReactNode`, `1 \| 2`	The problem and where it stopped
`carrier`, `trackingNumber`, `carrierHref`, `mapHref`	`string`	Carrier row
`item`	`{ title, image?, detail? }`	The parcel's contents
`events`, `defaultEventsOpen`	`{ id, time, label, place? }[]`, `boolean`	History
`loading`, `error`, `onRetry`		States
`labels`	`Partial<OrderTrackingLabels>`	Every string, for translation

Accessibility

The card is named by its headline and item.
The rail is an ordered list; the current stop has aria-current="step", with Needs attention added in words for an exception.
The history toggle uses aria-expanded; the newest scan is prefixed Latest.

Motion

The rail fill eases to a new position in 300 ms when the status changes; the history fades up in 180 ms. Reduced motion jumps the fill and keeps the fade.