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-trackingPreview
Thu, 8 Feb, 10:30 AM
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
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
| Prop | Type | Default | Description |
|---|---|---|---|
| timestamp | string | — | Date and time displayed at the top left. |
| carrier | string | — | Carrier name text (shown if no carrierLogo). |
| carrierLogo | ReactNode | — | 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. |
| statusLabel | string | — | Text shown inside the status pill. |
| progress | number | 50 | Progress 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. |
| className | string | — | 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).