Testimonial

The Testimonial component displays a customer quote with author attribution, including optional role, company, and avatar image. It is designed for landing pages, marketing sections, and social proof areas.

Import

import { Testimonial } from '@nim-ui/components';

Usage

Nim UI has transformed the way our team builds interfaces. We ship features twice as fast now.

Sarah Chen

Engineering Lead, Acme Corp

Code

<Testimonial
  quote="Nim UI has transformed the way our team builds interfaces. We ship features twice as fast now."
  author="Sarah Chen"
  role="Engineering Lead"
  company="Acme Corp"
/>

With Avatar

Marcus Johnson — Testimonial with Avatar

Minimal Testimonial

Simple, elegant, and incredibly well-documented. Exactly what I needed.

Alex Rivera

Code

<Testimonial
  quote="Simple, elegant, and incredibly well-documented. Exactly what I needed."
  author="Alex Rivera"
/>

With Role Only

We migrated our entire design system to Nim UI in a weekend. The TypeScript support is phenomenal.

Priya Patel

CTO

Code

<Testimonial
  quote="We migrated our entire design system to Nim UI in a weekend. The TypeScript support is phenomenal."
  author="Priya Patel"
  role="CTO"
/>

Multiple Testimonials

Best component library I've used. Period.

Jamie Lee

Frontend Developer, DevStudio

Dark mode support out of the box saved us weeks of work.

David Kim

UI Engineer, NightOwl

Code

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  <Testimonial
    quote="Best component library I've used. Period."
    author="Jamie Lee"
    role="Frontend Developer"
    company="DevStudio"
  />
  <Testimonial
    quote="Dark mode support out of the box saved us weeks of work."
    author="David Kim"
    role="UI Engineer"
    company="NightOwl"
  />
</div>

Props

Name	Type	Default	Description
`quote*`	`string`	-	The testimonial quote text
`author*`	`string`	-	Name of the person providing the testimonial
`role`	`string`	-	Job title or role of the author
`company`	`string`	-	Company or organization the author belongs to
`avatar`	`string`	-	URL to the author avatar image
`className`	`string`	-	Additional CSS classes to apply to the root element

Usage Examples

import { Testimonial } from '@nim-ui/components';

const testimonials = [
  {
    quote: "Nim UI reduced our development time by 60%.",
    author: "Sarah Chen",
    role: "Engineering Lead",
    company: "Acme Corp",
    avatar: "/avatars/sarah.jpg",
  },
  {
    quote: "The best React component library we've ever used.",
    author: "Marcus Johnson",
    role: "Senior Developer",
    company: "TechStart",
    avatar: "/avatars/marcus.jpg",
  },
  {
    quote: "Accessibility-first approach sets this apart from everything else.",
    author: "Priya Patel",
    role: "CTO",
    company: "A11y Labs",
    avatar: "/avatars/priya.jpg",
  },
];

function TestimonialsSection() {
  return (
    <section className="py-16 bg-neutral-50 dark:bg-neutral-900">
      <h2 className="text-3xl font-bold text-center mb-12">
        Loved by developers
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
        {testimonials.map((t) => (
          <Testimonial key={t.author} {...t} />
        ))}
      </div>
    </section>
  );
}

Featured Testimonial

function FeaturedTestimonial() {
  return (
    <div className="max-w-2xl mx-auto py-12">
      <Testimonial
        quote="Moving to Nim UI was the best decision we made this year. Our designers love the consistency, our developers love the DX, and our users love the performance."
        author="Elena Rodriguez"
        role="VP of Engineering"
        company="ScaleUp Inc."
        avatar="/avatars/elena.jpg"
      />
    </div>
  );
}

Accessibility

The Testimonial component includes proper semantic markup:

Uses <blockquote> for the quote text
Uses <cite> for the author attribution
Avatar images include proper alt text with the author name
When no avatar is present, the layout adjusts without leaving empty decorative space
Text maintains sufficient contrast ratios in both light and dark modes

Avatar - User profile image display
Card - Generic content container
Hero - Landing page hero section

On this page