UI ComponentsMarketing
Testimonials
Testimonials section for social proof with quotes and ratings
Social proof section displaying customer testimonials, reviews, and ratings.
Structure
Grid Layout (Default)
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header │ │
│ │ title │ │
│ │ subtitle │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ testimonials │ │
│ │ ┌───────────────┐ ┌───────────────┐ ┌─────────┐ │ │
│ │ │ testimonial │ │ testimonial │ │ testim. │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ "Quote text │ │ "Quote text │ │ "Quote │ │ │
│ │ │ goes here" │ │ goes here" │ │ here" │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ ⭐⭐⭐⭐⭐ │ │ ⭐⭐⭐⭐⭐ │ │ ⭐⭐⭐⭐⭐ │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ ┌──┐ Name │ │ ┌──┐ Name │ │ ┌──┐Nam │ │ │
│ │ │ │👤│ Role │ │ │👤│ Role │ │ │👤│Role│ │ │
│ │ │ └──┘ Company │ │ └──┘ Company │ │ └──┘Co. │ │ │
│ │ └───────────────┘ └───────────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Carousel Layout
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ testimonials │ │
│ │ ┌─┐ ┌───────────────────────────────────────┐ ┌─┐│
│ │ │←│ │ testimonial │ │→││
│ │ │ │ │ │ │ ││
│ │ │ │ │ "This product changed our workflow" │ │ ││
│ │ │ │ │ │ │ ││
│ │ │ │ │ ⭐⭐⭐⭐⭐ │ │ ││
│ │ │ │ │ │ │ ││
│ │ │ │ │ ┌────┐ Jane Doe │ │ ││
│ │ │ │ │ │ │ CEO, Acme Corp │ │ ││
│ │ │ │ │ └────┘ │ │ ││
│ │ └─┘ └───────────────────────────────────────┘ └─┘│
│ │ ● ○ ○ ○ ○ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<Testimonials
title="What our customers say"
subtitle="Trusted by thousands of companies worldwide"
items={[
{
quote: "This product transformed how we work. Highly recommended!",
author: {
name: 'Jane Doe',
role: 'CEO',
avatar: '/avatars/jane.jpg',
},
company: 'Acme Corp',
rating: 5,
},
{
quote: "The best investment we've made this year. Amazing support!",
author: {
name: 'John Smith',
role: 'CTO',
avatar: '/avatars/john.jpg',
},
company: 'Tech Inc',
rating: 5,
},
{
quote: "Simple, powerful, and a pleasure to use every day.",
author: {
name: 'Sarah Johnson',
role: 'Product Manager',
avatar: '/avatars/sarah.jpg',
},
company: 'StartupCo',
rating: 5,
},
]}
layout="grid"
columns={3}
/>Layout Variants
<Testimonials layout="grid" columns={3} /> // 3-column grid
<Testimonials layout="carousel" autoPlay /> // Sliding carousel
<Testimonials layout="masonry" /> // Pinterest-style
<Testimonials layout="single" /> // One at a time
<Testimonials layout="featured" /> // Hero testimonial