Testimonials

Testimonials 540

About

Testimonials Section A responsive and animated component to showcase customer testimonials in a clean, grid-based layout.

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

Code

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

Usage.tsx

import { TestimonialSection } from "@/components/ui/testimonials"; // Adjust the import path as needed

// Sample data for the testimonials
const testimonialsData = [
  {
    id: 1,
    quote:
      "He is super fast and creative, delivered the website design within a week. Highly skilled and professional designer!",
    name: "Sarah",
    role: "Kickflip",
    imageSrc: "https://cdn.21st.dev/assets/mirror/74/745e68f049a196dc76df596f440abe803aa3c70fe529bfecfbc25ed29e1c2072.jpg",
  },
  {
    id: 2,
    quote:
      "Impressed by the professionalism and attention to details in UI design. Highly Recommended!",
    name: "Martha",
    role: "Unicell",
    imageSrc: "https://cdn.21st.dev/assets/mirror/ee/ee5dc884ecd5d2542c64b63a4b246c9db7fff2faa43b67b29c0c49f914ab82ae.jpg",
  },
  {
    id: 3,
    quote:
      "A seamless experience from start to finish. Josh made our app design and experience really impressive.",
    name: "Victor",
    role: "Horizone",
    imageSrc: "https://cdn.21st.dev/assets/mirror/c9/c9f2bfc1b5fc1ad9a703dc7a3a84633690bb3d0da8c7606caa4d8dfdddc3ecaf.jpg",
  },
];

const TestimonialSectionDemo = () => {
  return (
    <TestimonialSection
      title="See what all the talk is about!"
      subtitle="Transformative Client experience from all around the globe"
      testimonials={testimonialsData}
    />
  );
};

export default TestimonialSectionDemo;