Order tracker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Order tracker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import OrderTracker from @/components/ui/order-tracker.

import { Button } from "@/components/ui/button"
import { OrderTracker, type OrderEvent } from "@/components/ui/order-tracker"

const events: OrderEvent[] = [
  { id: "e3", title: "Out for delivery", description: "Driver Michael Brooks", time: "2026-09-24T08:12:00", status: "out-for-delivery" },
  { id: "e2", title: "Handed to the courier", location: "Newark, NJ", time: "2026-09-22T15:40:00", status: "shipped" },
  { id: "e1", title: "Order placed", time: "2026-09-22T10:14:00", status: "placed" },
]

export function Order() {
  return (
    <OrderTracker
      orderNumber="#1042"
      status="out-for-delivery"
      placedAt="2026-09-22T10:14:00"
      eta={{ from: "2026-09-24T17:00:00", to: "2026-09-24T19:00:00" }}
      events={events}
      courier={{
        name: "FedEx",
        trackingNumber: "2345 6789 012",
        trackingUrl: "https://www.fedex.com/fedextrack/",
        driver: { name: "Michael Brooks", phone: "(212) 555-0147" },
      }}
      items={[{ id: "p1", title: "City bike", quantity: 1, price: 1199 }]}
      currency="USD"
      locale="en-US"
      labels={{ order: (n) => `Order ${n}`, eta: (w) => `Arrives ${w}` }}
      actions={<Button variant="soft">Contact support</Button>}
    />
  )
}

Props

• orderNumber*default "#1042"
  string

  The order number in the heading ("Order #1042") and what the copy button copies.

• statusdefault "shipped"
  "placed" | "confirmed" | "shipped" | "out-for-delivery" | "ready-for-pickup" | "delivered" | "failed" | "cancelled" | "returned"

  Drives the badge and its color, the milestones (when not given), the arrival line and where the courier sits on the route. Ended orders (delivered, failed, cancelled, returned) paint in their status color; an unknown value shows as is in a neutral badge.

• placedAt
  TimeInput

  When the order was placed, under the number ("Placed 22.09.2026, 10:14").

• eta
  { from: TimeInput; to?: TimeInput } | string

  The arrival window, written relative to now ("Arrives today between 17:00 and 19:00", "tomorrow", a weekday, then the date), or free text. A window that has passed while the order still moves turns the badge into "Delayed".

• etaNotedefault ""
  ReactNode

  A muted line under the arrival ("Handed over in person", "The courier calls 15 minutes before").

• deliveredAt
  TimeInput

  With status delivered the arrival line reads "Delivered today at 11:24".

• milestones
  OrderMilestone[] ({ id; label: ReactNode; status?: "complete" | "current" | "upcoming" | "error"; time?: TimeInput })

  Default: Placed, Confirmed, Shipped, Out for delivery, Delivered (Ready for pickup and Picked up for locker orders), each dated from the first matching event and its state derived from status. A failed or cancelled order shows the error on the step where it stopped.

• eventsdefault "[]"
  OrderEvent[] ({ id; title: ReactNode; description?: ReactNode; location?: string; time: TimeInput; status?: OrderStatus; icon?: ReactNode })

  The shipment history, newest first, each event with its day ("Today", "Yesterday", a weekday, then the date) and time. Each status brings its icon; the newest event takes its status color. Empty hides the section.

• historyLimitdefault 3
  number

  Events shown before the Show full history button.

• courier
  OrderCourier ({ name; logo?: ReactNode; trackingNumber?; trackingUrl?; phone?; driver?: { name; avatar?; phone? } })

  The courier tile: logo or a truck, the driver with an avatar, a call button (tel:, until the parcel is delivered or returned), the tracking number with a copy button and the tracking link (new tab). Hidden while none is known and when the order is cancelled.

• pickup
  { name: string; address: string; code?: string; until?: TimeInput }

  A locker or store pickup. Switches the milestones to Ready for pickup / Picked up and, while ready for pickup, replaces the courier with the locker, the PIN (large, with a copy button) and the deadline.

• items
  OrderTrackerItem[] ({ id; title: string; image?: string; quantity: number; price: number })

  Overlapping thumbnails, "4 items", the titles and the total.

• totaldefault 0
  number

  The total shown by the items. 0 sums the items (price times quantity) through lib/commerce.

• map
  ReactNode | false

  Your own map (an embed, an image) in place of the illustration, or false to hide it. The default illustration is decorative (aria-hidden) with a caption.

• animateddefault true
  boolean

  false draws the route at once and stops every pulse (the courier dot, the badge), for thumbnails and static pages. Reduced motion does the same on its own.

• showMapdefault true
  boolean

  The route illustration (or your map). Not shown for cancelled and returned orders.

• showHistorydefault true
  boolean

  The shipment history section.

• showItemsdefault true
  boolean

  The items row with the total.

• notice
  ReactNode | { title?: ReactNode; description?: ReactNode; actions?: ReactNode; tone?: Tone }

  An inline alert under the arrival: the reason of a failed attempt and the next try, a refund note. A failed order without one shows the description of its newest failed event.

• variantdefault "card"
  "card" | "page"

  card: everything in one panel. page: sections for a full page (status, map, courier and items, with the history in a column beside them once the tracker is about 768px wide).

• sizedefault "md"
  "sm" | "md"

  sm is the compact card of an orders list: the header, the arrival line and the milestones.

• actions
  ReactNode

  Buttons at the end (contact, report a problem, return). They stack full width on a phone.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The milestones, the arrival icon and the route while the order is in progress (a failed or cancelled order keeps it on the milestones, where the stopped step shows in amber for a failed attempt and red for a cancellation). Ended orders paint the rest in the exported ORDER_STATUS_TONES instead (placed and confirmed neutral, shipped, out for delivery and ready for pickup info, delivered success, failed warning, cancelled danger, returned neutral), so the end state always reads the same; reuse it for your own order badges.

• colordefault ""
  string

  Any CSS color; replaces the tone while the order is in progress. Leave empty to use the tone.

• now
  number | Date | null

  The reference time for "today", the delay check and the day headings. Default: the live clock (useNow), null while hydrating.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  Renders the tracking link; default: the LinkProvider's link, else <a>.

• currencydefault "USD"
  string

  ISO 4217 code of the total.

• localedefault ""
  string

  Intl locale for dates, times, counts and the total. Empty uses the UIProvider locale, then the page.

• labels
  Partial<OrderTrackerLabels>

  Every string, English by default (exported as DEFAULT_ORDER_TRACKER_LABELS, spread it under your own): order (n) => "Order #1042", placedOn, status per OrderStatus, delayed, milestones (placed, confirmed, shipped, outForDelivery, delivered, readyForPickup, pickedUp), steps (Steps labels: progress, step, next), eta, window, at, delivered, trackingNumber, copyOrderNumber, copyTrackingNumber, copyPickupCode, copied, track, newTab, callCourier, pickupCode, pickupUntil, history, showAll, showLess, items (count, formatted), total, mapLabel.

• classNames
  Partial<Record<"header" | "status" | "eta" | "milestones" | "map" | "courier" | "pickup" | "history" | "items" | "actions", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root section, merged last.

Parts

FAQ

Used in

More React commerce components