HelpTribe.

OrderTracking

Shipment tracking card with carrier branding, status progress bar, and origin/destination details. Designed for logistics dashboards and ERP delivery modules.

Installation

$ npx shadcn@latest add order-tracking

Preview

Thu, 8 Feb, 10:30 AM
DHL
Shipped

Techart

Frankfurt

Mon, 6 Feb

Roman Vorokhib

Dubai

Thu, 12 Feb

Mon, 12 Mar, 2:15 PMFedEx
Out for Delivery

Acme Corp

New York

Sat, 10 Mar

James Wilson

London

Wed, 15 Mar

Fri, 20 Jan, 9:00 AMUPS
Delivered

Tokyo

Mon, 15 Jan

Sarah Chen

Sydney

Fri, 20 Jan

Status Variants

Thu, 8 Feb, 10:30 AM
DHL
Shipped

Techart

Frankfurt

Mon, 6 Feb

Roman Vorokhib

Dubai

Thu, 12 Feb

Mon, 12 Mar, 2:15 PMFedEx
Out for Delivery

Acme Corp

New York

Sat, 10 Mar

James Wilson

London

Wed, 15 Mar

Fri, 20 Jan, 9:00 AMUPS
Delivered

Tokyo

Mon, 15 Jan

Sarah Chen

Sydney

Fri, 20 Jan

Usage (React/TSX)

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

export default function ShipmentDashboard() {
  return (
    <div className="space-y-4">
      <OrderTracking
        timestamp="Thu, 8 Feb, 10:30 AM"
        carrier="DHL"
        status="shipped"
        statusLabel="Shipped"
        origin={{ city: "Frankfurt", date: "Mon, 6 Feb", name: "Techart" }}
        destination={{ city: "Dubai", date: "Thu, 12 Feb", name: "Roman Vorokhib" }}
      />
      <OrderTracking
        timestamp="Mon, 12 Mar, 2:15 PM"
        carrier="FedEx"
        status="delivered"
        statusLabel="Delivered"
        origin={{ city: "New York", date: "Sat, 10 Mar" }}
        destination={{ city: "London", date: "Wed, 15 Mar", name: "James Wilson" }}
      />
    </div>
  )
}

Props

PropTypeDefaultDescription
timestampstring—Date and time displayed at the top left.
carrierstring—Carrier name text (shown if no carrierLogo).
carrierLogoReactNode—Custom carrier logo element (overrides carrier text).
status"pending" | "picked_up" | "in_transit" | "shipped" | "out_for_delivery" | "delivered"—Current tracking status, controls color and icon.
statusLabelstring—Text shown inside the status pill.
progressnumber50Progress value 0-100. At 100, the pill fills the full width (no dotted line).
origin{ city: string; date: string; name?: string }—Origin location details.
destination{ city: string; date: string; name?: string }—Destination location details.
classNamestring—Additional CSS classes to apply.

Design Notes

  • Dark card with subtle border — matches the ERP dashboard aesthetic.
  • Status pill uses gradient backgrounds per status (teal for shipped, green for delivered, etc.).
  • Carrier logo takes priority over carrier text — pass either one.
  • Origin/destination names are optional (e.g., for anonymous shipments).
  • Built-in icons for shipped (plane), delivered (checkmark), and default (clock).