ProductQuickView

Modal-style product card with color selection, size options, and quantity

E-commerceproductquick-viewmodal

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx 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 { Button } from '@/components/ui/button';
4import { Card, CardContent } from '@/components/ui/card';
5import { Badge } from '@/components/ui/badge';
6import { Star, Minus, Plus } from 'lucide-react';
7
8const colors = [
9  { name: 'slate', class: 'bg-slate-500' },
10  { name: 'amber', class: 'bg-amber-500' },
11  { name: 'emerald', class: 'bg-emerald-500' },
12  { name: 'rose', class: 'bg-rose-500' },
13];
14
15const sizes = ['S', 'M', 'L'];
16
17export default function ProductQuickView() {
18  return (
19    <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700 max-w-2xl mx-auto">
20      <CardContent className="p-6 space-y-6">
21        <div className="relative h-64 bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl flex items-center justify-center">
22          <div className="w-40 h-40 bg-gradient-to-br from-slate-600 to-slate-700 rounded-2xl flex items-center justify-center">
23            <span className="text-slate-500 text-5xl">💡</span>
24          </div>
25        </div>
26        
27        <div>
28          <h2 className="text-2xl font-bold text-white mb-2">Minimal Desk Lamp</h2>
29          <div className="flex items-center gap-2">
30            <div className="flex gap-0.5">
31              {[...Array(5)].map((_, i) => (
32                <Star key={i} className="h-4 w-4 text-yellow-400 fill-yellow-400" />
33              ))}
34            </div>
35            <span className="text-slate-400 text-sm">(64 reviews)</span>
36          </div>
37        </div>
38        
39        <p className="text-3xl font-bold text-white">$129.00</p>
40        
41        <div>
42          <p className="text-slate-300 mb-3">Color</p>
43          <div className="flex gap-3">
44            {colors.map((color, index) => (
45              <button
46                key={color.name}
47                className={
48                  'w-8 h-8 rounded-full ' +
49                  color.class +
50                  (index === 0 ? ' ring-2 ring-offset-2 ring-offset-slate-900 ring-white' : '')
51                }
52              />
53            ))}
54          </div>
55        </div>
56        
57        <div>
58          <p className="text-slate-300 mb-3">Size</p>
59          <div className="flex gap-3">
60            {sizes.map((size) => (
61              <button
62                key={size}
63                className={
64                  'w-12 h-12 rounded-lg border-2 font-semibold transition-all ' +
65                  (size === 'M'
66                    ? 'border-purple-500 bg-purple-500/20 text-white'
67                    : 'border-slate-700 text-slate-400 hover:border-slate-600')
68                }
69              >
70                {size}
71              </button>
72            ))}
73          </div>
74        </div>
75        
76        <div>
77          <p className="text-slate-300 mb-3">Quantity</p>
78          <div className="flex items-center gap-3">
79            <Button variant="outline" size="icon" className="border-slate-700 text-slate-400 hover:text-white">
80              <Minus className="h-4 w-4" />
81            </Button>
82            <span className="text-white text-xl font-semibold w-8 text-center">1</span>
83            <Button variant="outline" size="icon" className="border-slate-700 text-slate-400 hover:text-white">
84              <Plus className="h-4 w-4" />
85            </Button>
86          </div>
87        </div>
88        
89        <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">
90          Add to Cart
91        </Button>
92      </CardContent>
93    </Card>
94  );
95}