Testimonial

Testimonials 68

About

Testimonial Section This component renders a title and a grid of testimonial cards. It's designed to be highly reusable, accepting an array of testimonial objects to dynamically generate the content. It supports two types of cards: a standard user testimonial with an avatar and a featured quote card.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Testimonial to your project and fits it to your theme.

Code

How Testimonial is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TestimonialSection, Testimonial } from "@/components/ui/testimonial";

const testimonialsData: Testimonial[] = [
  {
    type: "user",
    quote: "I was self-employed for 13 years and I'd never really done any interviews. Using interview Warmup I learned how to answer questions in a much more professional way. It's been a big confidence boost.",
    name: "Le'mont C.",
    role: "Google Career Certificate graduate",
    avatarSrc: "https://cdn.21st.dev/assets/mirror/37/37244c537d174b36bca20e8eea1defa8ef8ccc323026eb7092666957cc4e59b4.jpg",
    avatarFallback: "LC",
  },
  {
    type: "quote",
    quote: "I feel much more confident in my ability to leverage generative AI tools effectively and responsibly. The hands-on activities and real-world examples were particularly helpful in solidifying my understanding.",
    name: "Susan R.", // Name and role are optional for quote type
    role: "Google Prompting Essentials graduate",
  },
  {
    type: "user",
    quote: "The AI Essentials course was instrumental in equipping me with a strong foundation in leveraging AI for daily tasks. I've achieved a dramatic improvement in my daily efficiency, freeing up time for more strategic tasks.",
    name: "Christian W.",
    role: "Google AI Essentials graduate",
    avatarSrc: "https://cdn.21st.dev/assets/mirror/d5/d54ea6604bc1b3bb37b31bb96a4811ce47d8c83c170ae46071440284f5fa2abf.jpg",
    avatarFallback: "CW",
  },
];

export default function TestimonialSectionDemo() {
  return (
    <div className="w-full bg-background">
      <TestimonialSection
        title="Empowering more people with AI"
        testimonials={testimonialsData}
      />
    </div>
  );
}