Page UI logo

Landing Page Testimonial Grid Component

Use this component to display a grid of testimonials.
This component accepts a title, description and a list of testimonials. They will be placed in a column layout on small screens, then a 2-column layout and finally a 3-column layout on large screens.
Each testimonial can be featured or not. The featured testimonial will stand out with bigger & bolder text.

Testimonials are a great way to show that other people have used your product and are happy with it. Consider adding it high up on your landing page.


import { LandingTestimonialGrid } from '@/components/landing/testimonial/LandingTestimonialGrid';
const testimonialItems = [
    name: 'Mathew',
    text: 'After using this, I cannot imagine going back to the old way of doing things.',
    handle: '@heymatt_oo',
    imageSrc: '',
    name: 'Joshua',
    text: 'Perfect for my use case',
    handle: '@joshua',
    imageSrc: '',
    name: 'Parl Coppa',
    text: 'This is the best thing since sliced bread. I cannot believe I did not think of it myself.',
    handle: '@coppalipse',
    imageSrc: '',
    featured: true, // Feature this testimonial
    name: 'Mandy',
    text: 'Excellent product!',
    handle: '@mandy',
    imageSrc: '',
    name: 'Alex',
    text: 'Can easily recommend!',
    handle: '@alex',
    imageSrc: '',
    name: 'Sam',
    text: 'I am very happy with the results.',
    handle: '@sama',
    imageSrc: '',
  title="Don't take it from us"
  description="See what other people have to say."


This component supports different background colors.

Here we set variant to secondary. Testimonials can also be linked + be featured and you can mix and match to send the desired message.

Background Glow

Read more wrapper

If your testimonials exceed 2 rows, you can add a "Read more" wrapper to hide the rest of the content initially.
This is usually a good idea to keep the page clean and focused.

API Reference

Prop NameProp TypeRequiredDefault
title string ǀ React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
testimonialItems Array<TestimonialItem>Yes-
featuredTestimonial TestimonialItemNo-
withBackground booleanNo-
variant 'primary' ǀ 'secondary'No'primary'
withBackgroundGlow booleanNofalse
backgroundGlowVariant 'primary' ǀ 'secondary'No'primary'
export interface TestimonialItem {
  className?: string;
  url?: string;
  text: string;
  imageSrc: string;
  name: string;
  handle: string;
  featured?: boolean;
  verified?: boolean;
  size?: 'full' | 'half' | 'third'; // NB: Only applies to testimonials in a list, not grid.

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.