Order History

Cards 159

About

Order History – Track every step. Shows order progress from placed to delivered with clear timeline.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Order History to your project and fits it to your theme.

Code

How Order History is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx

import React from "react";
import TrackingTimeline, { TimelineItem } from "@/components/ui/order-history";
import {
  Home,
  Package,
  Ship,
  Warehouse,
  ClipboardCheck,
  PackageCheck,
} from "lucide-react";

const orderHistoryItems: TimelineItem[] = [
  {
    id: 1,
    status: "completed",
    title: "Order Placed",
    date: "20 Jun 2024, 08:45",
    icon: <ClipboardCheck className="h-4 w-4 text-white" />,
  },
  {
    id: 2,
    status: "completed",
    title: "Order Processed",
    date: "21 Jun 2024, 02:30",
    icon: <Package className="h-4 w-4 text-white" />,
  },
  {
    id: 3,
    status: "completed",
    title: "Pick up",
    date: "22 Jun 2024, 12:34",
    icon: <Warehouse className="h-4 w-4 text-white" />,
  },
  {
    id: 4,
    status: "in-progress",
    title: "Out for shipment",
    date: "Today",
    icon: <Ship className="h-4 w-4 text-primary" />,
  },
  {
    id: 5,
    status: "pending",
    title: "Out for Delivery",
    date: "24 Jun 2024",
    icon: <PackageCheck className="h-4 w-4 text-muted-foreground/50" />,
  },
  {
    id: 6,
    status: "pending",
    title: "Delivered",
    date: "24 Jun 2024",
    icon: <Home className="h-4 w-4 text-muted-foreground/50" />,
  },
];

const TrackingTimelineDemo = () => {
  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-md rounded-lg border bg-card p-6 shadow-sm">
        <h2 className="mb-6 text-xl font-bold text-card-foreground">Order History</h2>
        <TrackingTimeline items={orderHistoryItems} />
      </div>
    </div>
  );
};

export default TrackingTimelineDemo;