Skip to content
Nim UI

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

Default Testimonial

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

Sarah Chen

Engineering Lead, Acme Corp
View 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

Testimonial with Avatar

The accessibility features alone make this library worth it. Every component works beautifully with screen readers and keyboard navigation.
Marcus Johnson

Marcus Johnson

Senior Developer, TechStart
View Code 
<Testimonial
  quote="The accessibility features alone make this library worth it. Every component works beautifully with screen readers and keyboard navigation."
  author="Marcus Johnson"
  role="Senior Developer"
  company="TechStart"
  avatar="/images/marcus.jpg"
/>

Minimal Testimonial

Quote and Author Only

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

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

With Role Only

Testimonial with Role

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

Priya Patel

CTO
View 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

Testimonials in a Grid

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

View 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

Social Proof Section

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>
  );
}
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