Milestone Stepper

import {
  MilestoneStepper,
  MilestoneData,
} from "@/components/ruixen/milestone-stepper";

const milestones: MilestoneData[] = [
  {
    id: 1,
    title: "Order Placed",
    description: "Your order has been confirmed",
  },
  { id: 2, title: "Shipped", description: "Package handed to courier" },
  { id: 3, title: "In Transit", description: "On the way to destination" },
  { id: 4, title: "Delivered", description: "Package delivered" },
];
 
<MilestoneStepper milestones={milestones} currentMilestone={2} />;

const milestones = [
  { id: 1, title: "Order Placed", description: "Confirmed", date: "Jan 15" },
  { id: 2, title: "Shipped", description: "Handed to courier", date: "Jan 17" },
  { id: 3, title: "In Transit", description: "On the way", date: "Jan 18" },
  { id: 4, title: "Delivered", description: "Complete", date: "Expected" },
];
 
<MilestoneStepper
  milestones={milestones}
  currentMilestone={2}
  variant="detailed"
/>;

import { Package, Truck, Home, CheckCircle } from "lucide-react";
 
const milestones = [
  { id: 1, title: "Confirmed", icon: <CheckCircle className="size-4" /> },
  { id: 2, title: "Packed", icon: <Package className="size-4" /> },
  { id: 3, title: "Shipped", icon: <Truck className="size-4" /> },
  { id: 4, title: "Delivered", icon: <Home className="size-4" /> },
];
 
<MilestoneStepper milestones={milestones} currentMilestone={1} />;

<MilestoneStepper
  milestones={milestones}
  currentMilestone={2}
  variant="compact"
/>

<MilestoneStepper
  milestones={milestones}
  currentMilestone={1}
  lineStyle="dashed"
/>