Testimonial Sections

Testimonials build trust and social proof. These components help you showcase customer feedback in a variety of layouts, from simple grids to interactive carousels.

Component Variants

Testimonial Grid

“TypeScript UI let us ship our new dashboard in half the time. The components are polished, accessible, and just work out of the box.”

“We evaluated a dozen component libraries and this was the only one that didn't require us to fight the defaults to get a design our team was proud of.”

“The documentation is excellent and every component ships with sensible TypeScript types. Onboarding new engineers has never been faster.”

Testimonial Single

“TypeScript UI transformed how quickly we can build and ship new interfaces. It's the first component library our whole team has agreed on.”

Testimonial Carousel

“TypeScript UI became the foundation of our entire design system. Every new feature ships faster because the building blocks are already there.”

Claire Dupont

VP of Engineering · Meridian

Testimonial With Rating

Best investment we made this year. Support is responsive and the component quality is consistently high.

Devon Brooks

CTO · Harbor Analytics

Great library overall. A few edge cases needed extra styling, but the team shipped fixes quickly.

Amelia Ford

Product Designer · Kindred

Exactly what we needed for our internal tools. Clean APIs and thoughtful accessibility defaults.

Tomasz Kowalski

Staff Engineer · Vantable

Testimonial Masonry

“Switching to TypeScript UI cut our component maintenance time dramatically.”

“The variety of pre-built section layouts meant our marketing team could assemble new landing pages without waiting on engineering for every tweak. It's been a huge unlock for how quickly we can test new messaging.”

“Solid defaults, minimal bikeshedding. Our team shipped a full redesign in three weeks.”

“Accessibility was a top requirement for us and TypeScript UI delivered. Keyboard navigation and screen reader support worked correctly the first time we tested.”

“Beautiful components with a small bundle footprint. Exactly the balance we were looking for.”

Usage

import {
  TestimonialGrid,
  TestimonialSingle,
  TestimonialCarousel,
  TestimonialWithRating,
  TestimonialMasonry,
} from '@/components/ui/testimonials';

// Testimonial Grid
<TestimonialGrid
  columns={3} // 2 | 3
  testimonials={[
    {
      quote: 'This library saved us weeks of work.',
      author: {
        name: 'Sarah Chen',
        role: 'Frontend Lead',
        company: 'Northwind',
        avatarSrc: '/avatars/sarah.jpg',
      },
    },
  ]}
/>

// Testimonial Single
<TestimonialSingle
  quote="TypeScript UI transformed how quickly we can build interfaces."
  author={{ name: 'Alex Morgan', role: 'CEO', company: 'Fieldnote', avatarSrc: '/avatars/alex.jpg' }}
  companyLogoSrc="/logos/fieldnote.svg"
  companyLogoAlt="Fieldnote"
/>

// Testimonial Carousel
<TestimonialCarousel
  testimonials={[
    { quote: 'Great library.', author: { name: 'Claire Dupont', role: 'VP Engineering', avatarSrc: '/avatars/claire.jpg' } },
  ]}
/>

// Testimonial With Rating
<TestimonialWithRating
  columns={3} // 2 | 3
  testimonials={[
    {
      quote: 'Best investment we made this year.',
      rating: 5, // 1-5
      author: { name: 'Devon Brooks', role: 'CTO', company: 'Harbor Analytics', avatarSrc: '/avatars/devon.jpg' },
    },
  ]}
/>

// Testimonial Masonry
<TestimonialMasonry
  columns={3} // 2 | 3 | 4
  testimonials={[
    { quote: 'Cut our maintenance time dramatically.', author: { name: 'Elena Vasquez', role: 'Design Systems Lead', avatarSrc: '/avatars/elena.jpg' } },
  ]}
/>

Props Reference

TestimonialGrid

TestimonialSingle

TestimonialCarousel

Keyboard support: use the Left/Right arrow keys while the carousel is focused to navigate between testimonials.

TestimonialWithRating

TestimonialMasonry