CartDrawer

Shopping cart summary with items, quantities, subtotal, and checkout button

E-commercecartcheckoutshopping

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx shadcn@latest add separator

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 { Button } from '@/components/ui/button';
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
5import { Separator } from '@/components/ui/separator';
6import { Minus, Plus, Trash2 } from 'lucide-react';
7
8const cartItems = [
9  { id: 1, name: 'Premium Wireless Headphones', color: 'Black', price: 299.99, qty: 1 },
10  { id: 2, name: 'Leather Messenger Bag', color: 'Brown', price: 189.99, qty: 2 },
11  { id: 3, name: 'Minimal Desk Lamp', color: 'White', price: 68.00, qty: 1 },
12];
13
14export default function CartDrawer() {
15  const subtotal = cartItems.reduce((sum, item) => sum + (item.price * item.qty), 0);
16  
17  return (
18    <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700">
19      <CardHeader className="border-b border-slate-700">
20        <CardTitle className="text-white">Shopping Cart ({cartItems.length})</CardTitle>
21      </CardHeader>
22      
23      <CardContent className="p-6 space-y-6">
24        <div className="space-y-4">
25          {cartItems.map((item) => (
26            <div key={item.id} className="flex gap-4">
27              <div className="w-20 h-20 bg-gradient-to-br from-slate-700 to-slate-800 rounded-lg flex items-center justify-center flex-shrink-0">
28                <span className="text-slate-500 text-2xl">📦</span>
29              </div>
30              
31              <div className="flex-1 min-w-0">
32                <h4 className="text-white font-medium truncate">{item.name}</h4>
33                <p className="text-slate-400 text-sm">{item.color}</p>
34                <p className="text-purple-400 font-semibold mt-1">${item.price.toFixed(2)}</p>
35              </div>
36              
37              <div className="flex flex-col items-end gap-2">
38                <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400">
39                  <Trash2 className="h-4 w-4" />
40                </Button>
41                
42                <div className="flex items-center gap-2 bg-slate-800 rounded-lg p-1">
43                  <Button variant="ghost" size="icon" className="h-6 w-6 text-slate-400 hover:text-white">
44                    <Minus className="h-3 w-3" />
45                  </Button>
46                  <span className="text-white text-sm w-6 text-center">{item.qty}</span>
47                  <Button variant="ghost" size="icon" className="h-6 w-6 text-slate-400 hover:text-white">
48                    <Plus className="h-3 w-3" />
49                  </Button>
50                </div>
51              </div>
52            </div>
53          ))}
54        </div>
55        
56        <Separator className="bg-slate-700" />
57        
58        <div className="space-y-3">
59          <div className="flex justify-between text-slate-400">
60            <span>Subtotal</span>
61            <span className="text-white">${subtotal.toFixed(2)}</span>
62          </div>
63          <div className="flex justify-between text-slate-400">
64            <span>Shipping</span>
65            <span className="text-green-400">Free</span>
66          </div>
67          <Separator className="bg-slate-700" />
68          <div className="flex justify-between text-lg font-bold">
69            <span className="text-white">Total</span>
70            <span className="text-white">${subtotal.toFixed(2)}</span>
71          </div>
72        </div>
73        
74        <Button className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white py-6">
75          Proceed to Checkout
76        </Button>
77        
78        <p className="text-center text-slate-400 text-sm">
79          or{' '}
80          <button className="text-purple-400 hover:underline">Continue Shopping</button>
81        </p>
82      </CardContent>
83    </Card>
84  );
85}