Testimonials
Showcase customer reviews and testimonials in an engaging carousel format.
"This carousel component is incredibly smooth and easy to customize. It's exactly what we needed for our landing page."
SC
Sarah Chen
Product Designer at TechCorp
"The best carousel library I've used. Lightweight, accessible, and the API is intuitive. Highly recommend!"
MJ
Marcus Johnson
Frontend Developer at StartupXYZ
"Finally, a carousel that works perfectly on mobile. The touch gestures feel native and responsive."
ER
Emily Rodriguez
Mobile Lead at AppWorks
Use Case
A testimonials carousel helps you:
- Display customer reviews without taking up too much space
- Build social proof on landing pages
- Showcase multiple quotes in an interactive way
Features
- Single slide view - Focus on one testimonial at a time
- Star ratings - Visual rating display
- Author info - Avatar initials, name, role, and company
- Bottom navigation - Buttons positioned below the content
Implementation
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNavigation,
} from "@/components/ui/carousel";
const testimonials = [
{
quote: "Amazing product! Highly recommend.",
author: "Sarah Chen",
role: "Product Designer",
company: "TechCorp",
},
// ... more testimonials
];
export function TestimonialsCarousel() {
return (
<div className="relative w-full max-w-lg pb-6">
<Carousel>
<CarouselContent>
{testimonials.map((testimonial, index) => (
<CarouselItem key={index} className="p-4">
<div className="flex flex-col gap-4 rounded-xl border bg-card p-6">
{/* Star rating */}
<div className="flex gap-1">
{[...Array(5)].map((_, i) => (
<StarIcon key={i} className="h-5 w-5 fill-yellow-400" />
))}
</div>
{/* Quote */}
<blockquote className="text-lg text-zinc-700 dark:text-zinc-300">
"{testimonial.quote}"
</blockquote>
{/* Author */}
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-zinc-200">
{/* Avatar or initials */}
</div>
<div>
<p className="font-medium">{testimonial.author}</p>
<p className="text-sm text-zinc-500">
{testimonial.role} at {testimonial.company}
</p>
</div>
</div>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselNavigation
className="absolute -bottom-2 left-auto top-auto w-full justify-center gap-2"
alwaysShow
/>
</Carousel>
</div>
);
}Tips
- Keep testimonials concise for better readability
- Use real photos when available for more authenticity
- Consider adding company logos for B2B testimonials