New

OrderStatus

Order tracking card with 4-step progress indicator and delivery details

E-commerceordertrackingstatus

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add badge

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

1"use client";
2
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
4import { Badge } from '@/components/ui/badge';
5import { Check, Package, Truck, Home } from 'lucide-react';
6
7const steps = [
8  { id: 'ordered', label: 'Ordered', status: 'completed', icon: Package },
9  { id: 'shipped', label: 'Shipped', status: 'completed', icon: Truck },
10  { id: 'out-for-delivery', label: 'Out for Delivery', status: 'active', icon: Truck },
11  { id: 'delivered', label: 'Delivered', status: 'pending', icon: Home },
12];
13
14export default function OrderStatus() {
15  return (
16    <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700">
17      <CardHeader className="border-b border-slate-700">
18        <CardTitle className="text-white">Order #ORD-2024-1234</CardTitle>
19      </CardHeader>
20      
21      <CardContent className="p-6 space-y-8">
22        <div className="relative">
23          <div className="absolute top-5 left-0 right-0 h-1 bg-slate-700">
24            <div className="h-full w-2/3 bg-gradient-to-r from-green-500 to-blue-500 rounded-full" />
25          </div>
26          
27          <div className="relative flex justify-between">
28            {steps.map((step, index) => {
29              const Icon = step.icon;
30              return (
31                <div key={step.id} className="flex flex-col items-center gap-2">
32                  <div
33                    className={
34                      'w-10 h-10 rounded-full flex items-center justify-center border-2 z-10 ' +
35                      (step.status === 'completed'
36                        ? 'bg-green-500 border-green-500'
37                        : step.status === 'active'
38                        ? 'bg-blue-500 border-blue-500 animate-pulse'
39                        : 'bg-slate-800 border-slate-700')
40                    }
41                  >
42                    {step.status === 'completed' ? (
43                      <Check className="h-5 w-5 text-white" />
44                    ) : (
45                      <Icon className="h-5 w-5 text-white" />
46                    )}
47                  </div>
48                  <span
49                    className={
50                      'text-sm font-medium ' +
51                      (step.status === 'completed' || step.status === 'active'
52                        ? 'text-white'
53                        : 'text-slate-500')
54                    }
55                  >
56                    {step.label}
57                  </span>
58                </div>
59              );
60            })}
61          </div>
62        </div>
63        
64        <div className="space-y-4">
65          <div className="flex justify-between items-center py-3 border-b border-slate-700">
66            <span className="text-slate-400">Tracking Number</span>
67            <span className="text-white font-mono">1Z999AA10123456784</span>
68          </div>
69          
70          <div className="flex justify-between items-center py-3 border-b border-slate-700">
71            <span className="text-slate-400">Estimated Delivery</span>
72            <span className="text-white font-semibold">Dec 28, 2024</span>
73          </div>
74          
75          <div className="flex justify-between items-center py-3">
76            <span className="text-slate-400">Carrier</span>
77            <div className="flex items-center gap-2">
78              <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30">
79                FedEx Express
80              </Badge>
81            </div>
82          </div>
83        </div>
84      </CardContent>
85    </Card>
86  );
87}