Testimonial

Testimonials

About

Animated Testimonial Grid This component displays a visually engaging, animated grid of testimonials. It's designed to be highly reusable, allowing you to easily customize the title, description, call-to-action, and the list of testimonials through props. The floating animation adds a dynamic feel, capturing user attention.

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 { TestimonialCollage } from '@/components/ui/testimonial'; // Adjust import path

// Sample data for the testimonials
const sampleTestimonials = [
  { imgSrc: "https://cdn.21st.dev/assets/mirror/d9/d9c3271acd05d9fc3b9332537e7c77dc3ce42c119f9b79a0617465f3d522807d.jpg", name: "Emily White" },
  { imgSrc: "https://cdn.21st.dev/assets/mirror/68/687c8a7bceeb486d28a5927ca02a542c99bdc796679b201fed1570f63dda5e05.jpg", name: "James Smith" },
  { imgSrc: "https://cdn.21st.dev/assets/mirror/b2/b226346ec34fe24bbe9082488ff7f2c84d7150de914648cac41eeabe17579811.jpg", name: "Olivia Brown" },
  { imgSrc: "https://cdn.21st.dev/assets/mirror/ec/ec403263c2ba2f3e811004208f9aeee1fc9661da826802c5a26ea7ad11c000ba.jpg", name: "Maria Garcia" },
  { imgSrc: "https://cdn.21st.dev/assets/mirror/40/407ec2dc4a31cb8219557df265181c36183857203abb36ecf42f68cd28b3c688.jpg", name: "David Chen" },
  { imgSrc: "https://cdn.21st.dev/assets/mirror/e8/e87dd9c3d7e7c987901cef2bcca30db0157a1b51824e8628ccbfb27637ab9902.jpg", name: "Isabella Martinez" },
  { imgSrc: "https://cdn.21st.dev/assets/mirror/a0/a0797176d1bc1348bc6640625a890ab31c9f32021e2c7b6eb0ee6008a9b57cfd.jpg", name: "Alex Johnson" },
];

export default function TestimonialCollageDemo() {
  return (
    <div className="w-full bg-background">
      <TestimonialCollage testimonials={sampleTestimonials} />
    </div>
  );
}