Skip to main content
Clever Ops

Order Tracking Steps

Order fulfillment status steps for React storefronts, completed, current and upcoming grammar with aria-current, mono carrier timestamps, and an honest Tailwind-set ETA line.

Preview & code

Loading Order Tracking Steps preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/order-tracking-steps

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { OrderTrackingSteps } from '@/components/ui/order-tracking-steps'
Exampletsx
'use client'

import { OrderTrackingSteps } from '@/components/ui/order-tracking-steps'

const STEPS = [
  {
    label: 'Ordered',
    timestamp: 'Mon 13 Jul, 4:02pm',
  },
  {
    label: 'Packed',
    timestamp: 'Tue 14 Jul, 9:12am',
    note: 'Picked at the Melbourne warehouse',
  },
  {
    label: 'Shipped',
    timestamp: 'Tue 14 Jul, 2:48pm',
    note: 'Left the Sydney facility',
  },
  {
    label: 'Out for delivery',
    timestamp: 'Thu 16 Jul, 7:05am',
    note: 'With local courier, no signature required',
  },
  {
    label: 'Delivered',
  },
]

export default function OrderTrackingStepsDemo() {
  return (
    <div className="mx-auto flex w-full max-w-2xl justify-center px-4 py-10 sm:px-6 sm:py-14">
      <OrderTrackingSteps
        heading="Order status"
        orderRef="#CU-48291"
        steps={STEPS}
        currentStep={3}
        eta="Arriving Thursday 17 July"
        carrier={{
          name: 'AusPost',
          trackingId: '33XPL0492817',
          href: '#track-33XPL0492817',
        }}
      />
    </div>
  )
}

API reference

OrderTrackingSteps accepts the following props.

PropTypeDefaultDescription
headingstring'Order status'–
orderRefstring–mono chip, e.g. "#CU-48291"
steps*OrderTrackingStep[]––
currentStep*number–zero-based index of the active step
etastring–PREFORMATTED promise, e.g. "Arriving Thursday 17 July"
carrierOrderTrackingCarrier––

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface OrderTrackingStep {
  label: string
  /** PREFORMATTED, e.g. "Tue 14 Jul, 9:12am" */
  timestamp?: string
  /** e.g. "Left the Sydney facility" */
  note?: string
}

export interface OrderTrackingCarrier {
  name: string
  trackingId: string
  href?: string
}

Frequently asked questions

How do I install the Order Tracking Steps component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/order-tracking-steps`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Order Tracking Steps require?

Order Tracking Steps uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Order Tracking Steps to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services