New

Progress Steps

Vertical multi-stage progress tracker with tracking details

Feedback & Statusprogressstepstrackingtimeline

Dependencies

shadcn/ui components needed:

npx shadcn@latest add badgenpx shadcn@latest add progressnpx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1import { Check, Package, Truck, Home, MapPin } from 'lucide-react';
2import { Badge } from '@/components/ui/badge';
3import { Progress } from '@/components/ui/progress';
4import { Card, CardContent } from '@/components/ui/card';
5
6export default function ProgressSteps() {
7  return (
8    <Card className="w-full max-w-md">
9      <CardContent className="p-6">
10        <h3 className="mb-6 text-lg font-semibold">Order Tracking</h3>
11        <div className="relative space-y-0">
12          <div className="absolute left-[15px] top-2 h-[calc(100%-16px)] w-0.5 bg-border" />
13          
14          <div className="relative flex gap-4 pb-8">
15            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-500 text-white">
16              <Check className="h-4 w-4" />
17            </div>
18            <div className="flex-1">
19              <div className="flex items-center justify-between">
20                <p className="font-medium text-foreground">Order Placed</p>
21                <Badge variant="outline" className="text-xs">Mar 15, 10:30 AM</Badge>
22              </div>
23              <p className="text-sm text-muted-foreground">Order #12345 confirmed</p>
24            </div>
25          </div>
26
27          <div className="relative flex gap-4 pb-8">
28            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-500 text-white">
29              <Check className="h-4 w-4" />
30            </div>
31            <div className="flex-1">
32              <p className="font-medium text-foreground">Processing</p>
33              <p className="text-sm text-muted-foreground">Your order is being prepared</p>
34            </div>
35          </div>
36
37          <div className="relative flex gap-4 pb-8">
38            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
39              <Truck className="h-4 w-4" />
40            </div>
41            <div className="flex-1">
42              <div className="flex items-center justify-between">
43                <p className="font-medium text-foreground">Shipped</p>
44                <Badge className="bg-blue-500 text-white text-xs">In Transit</Badge>
45              </div>
46              <p className="mb-3 text-sm text-muted-foreground">On the way to your location</p>
47              <Card className="bg-muted/50 border-dashed">
48                <CardContent className="p-3">
49                  <div className="flex items-center gap-2 text-sm">
50                    <MapPin className="h-4 w-4 text-muted-foreground" />
51                    <span className="text-muted-foreground">Current:</span>
52                    <span className="font-medium">Chicago, IL</span>
53                  </div>
54                  <Progress value={65} className="mt-2 h-2" />
55                  <p className="mt-2 text-xs text-muted-foreground">Estimated delivery: Mar 18</p>
56                </CardContent>
57              </Card>
58            </div>
59          </div>
60
61          <div className="relative flex gap-4">
62            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
63              <Home className="h-4 w-4" />
64            </div>
65            <div className="flex-1">
66              <p className="font-medium text-muted-foreground">Delivered</p>
67              <p className="text-sm text-muted-foreground">Arriving at your doorstep</p>
68            </div>
69          </div>
70        </div>
71      </CardContent>
72    </Card>
73  );
74}