New

ProductCard

Premium product card with image, color swatches, star rating, price, wishlist heart, and add to cart button

E-commerceproductcardshopping

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 { Heart, Star } from 'lucide-react';
7
8export default function ProductCard() {
9  return (
10    <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700 overflow-hidden group hover:border-purple-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/10">
11      <CardContent className="p-0">
12        <div className="relative h-60 bg-gradient-to-br from-slate-700 to-slate-800 rounded-t-xl flex items-center justify-center">
13          <div className="w-32 h-32 bg-gradient-to-br from-slate-600 to-slate-700 rounded-2xl flex items-center justify-center">
14            <span className="text-slate-500 text-4xl">🎧</span>
15          </div>
16          <Button variant="ghost" size="icon" className="absolute top-3 right-3 bg-slate-800/80 hover:bg-red-500/20 hover:text-red-400 text-slate-400 backdrop-blur-sm">
17            <Heart className="h-5 w-5" />
18          </Button>
19          <Badge className="absolute top-3 left-3 bg-purple-500/20 text-purple-300 border-purple-500/30">
20            New
21          </Badge>
22        </div>
23        
24        <div className="p-5 space-y-4">
25          <div className="flex gap-2">
26            <div className="w-6 h-6 rounded-full bg-slate-500 ring-2 ring-offset-2 ring-offset-slate-900 ring-slate-500 cursor-pointer" />
27            <div className="w-6 h-6 rounded-full bg-rose-500 cursor-pointer hover:ring-2 hover:ring-offset-2 hover:ring-offset-slate-900 hover:ring-rose-500 transition-all" />
28            <div className="w-6 h-6 rounded-full bg-indigo-500 cursor-pointer hover:ring-2 hover:ring-offset-2 hover:ring-offset-slate-900 hover:ring-indigo-500 transition-all" />
29          </div>
30          
31          <div className="flex items-center gap-2">
32            <div className="flex gap-0.5">
33              {[...Array(4)].map((_, i) => (
34                <Star key={i} className="h-4 w-4 text-yellow-400 fill-yellow-400" />
35              ))}
36              <Star className="h-4 w-4 text-slate-600" />
37            </div>
38            <span className="text-slate-400 text-sm">(128)</span>
39          </div>
40          
41          <h3 className="text-white font-semibold text-lg leading-tight">
42            Premium Wireless Headphones
43          </h3>
44          
45          <div className="flex items-center gap-2">
46            <span className="text-2xl font-bold text-white">$299.99</span>
47            <span className="text-slate-500 line-through">$399.99</span>
48            <Badge className="bg-green-500/20 text-green-400 border-green-500/30">
49              25% OFF
50            </Badge>
51          </div>
52          
53          <Button className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white">
54            Add to Cart
55          </Button>
56        </div>
57      </CardContent>
58    </Card>
59  );
60}