TestimonialCarousel

Three testimonial cards with avatars, star ratings, and quotes

Marketing & Landingtestimonialssocial-proofreviews

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx 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 { Card, CardContent } from '@/components/ui/card';
4import { Avatar, AvatarFallback } from '@/components/ui/avatar';
5import { Star } from 'lucide-react';
6
7const testimonials = [
8  {
9    name: 'Sarah Chen',
10    role: 'CEO at TechFlow',
11    initials: 'SC',
12    quote: 'This platform transformed how we build products. The speed and quality are unmatched.',
13  },
14  {
15    name: 'Marcus Johnson',
16    role: 'Lead Developer at Scale',
17    initials: 'MJ',
18    quote: 'Best investment we\'ve made. Our development time dropped by 60% and our team loves it.',
19  },
20  {
21    name: 'Emily Rodriguez',
22    role: 'Product Manager at Innovate',
23    initials: 'ER',
24    quote: 'The intuitive design and powerful features helped us ship our MVP in record time.',
25  },
26];
27
28export default function TestimonialCarousel() {
29  return (
30    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6">
31      <div className="container mx-auto max-w-6xl">
32        <div className="text-center mb-16">
33          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
34            Loved by thousands
35          </h2>
36          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
37            See what our customers have to say about their experience
38          </p>
39        </div>
40        
41        <div className="grid md:grid-cols-3 gap-6">
42          {testimonials.map((testimonial, index) => (
43            <Card
44              key={index}
45              className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1"
46            >
47              <CardContent className="p-6">
48                <div className="flex gap-1 mb-4">
49                  {[...Array(5)].map((_, i) => (
50                    <Star
51                      key={i}
52                      className="h-5 w-5 text-yellow-400 fill-yellow-400"
53                    />
54                  ))}
55                </div>
56                
57                <p className="text-slate-300 italic mb-6 leading-relaxed">
58                  &ldquo;{testimonial.quote}&rdquo;
59                </p>
60                
61                <div className="flex items-center gap-3">
62                  <Avatar className="h-12 w-12 bg-gradient-to-br from-purple-500 to-indigo-500">
63                    <AvatarFallback className="text-white font-semibold">
64                      {testimonial.initials}
65                    </AvatarFallback>
66                  </Avatar>
67                  <div>
68                    <p className="text-white font-semibold">{testimonial.name}</p>
69                    <p className="text-slate-400 text-sm">{testimonial.role}</p>
70                  </div>
71                </div>
72              </CardContent>
73            </Card>
74          ))}
75        </div>
76      </div>
77    </div>
78  );
79}