ReviewCard

Customer review card with avatar, rating, review text, and helpful buttons

E-commercereviewratingfeedback

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx shadcn@latest add badgenpx shadcn@latest add avatar

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 { Avatar, AvatarFallback } from '@/components/ui/avatar';
7import { Star, ThumbsUp, ThumbsDown } from 'lucide-react';
8
9export default function ReviewCard() {
10  return (
11    <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700">
12      <CardContent className="p-6 space-y-4">
13        <div className="flex items-start justify-between">
14          <div className="flex items-center gap-3">
15            <Avatar className="h-12 w-12 bg-gradient-to-br from-purple-500 to-indigo-500">
16              <AvatarFallback className="text-white font-semibold">AK</AvatarFallback>
17            </Avatar>
18            <div>
19              <h4 className="text-white font-semibold">Alex Kim</h4>
20              <div className="flex items-center gap-2 mt-1">
21                <Badge className="bg-green-500/20 text-green-400 border-green-500/30 text-xs">
22                  Verified Purchase
23                </Badge>
24                <span className="text-slate-500 text-sm">2 days ago</span>
25              </div>
26            </div>
27          </div>
28        </div>
29        
30        <div className="flex gap-0.5">
31          {[...Array(4)].map((_, i) => (
32            <Star key={i} className="h-4 w-4 text-yellow-400 fill-yellow-400" />
33          ))}
34          <Star className="h-4 w-4 text-slate-600" />
35        </div>
36        
37        <div>
38          <h5 className="text-white font-semibold mb-2">Exceeded my expectations!</h5>
39          <p className="text-slate-400 leading-relaxed">
40            I was skeptical at first, but this product completely blew me away. The quality is outstanding and it arrived faster than expected. Would definitely recommend to anyone looking for something reliable and stylish.
41          </p>
42        </div>
43        
44        <div className="flex items-center gap-4 pt-2">
45          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-green-400 gap-2">
46            <ThumbsUp className="h-4 w-4" />
47            <span>Helpful (24)</span>
48          </Button>
49          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-red-400 gap-2">
50            <ThumbsDown className="h-4 w-4" />
51            <span>Not Helpful (3)</span>
52          </Button>
53        </div>
54      </CardContent>
55    </Card>
56  );
57}