Testimonial Card

Testimonials 69

About

A versatile card component for displaying user testimonials with avatars and social links inspired by Launch UI. It supports both linked and non-linked variants, custom styling, and responsive design. Features: • Avatar with user image • Name and social handle • Testimonial text • Optional link wrapper • Gradient background with hover effects • Dark mode support

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

Code

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

Usage.tsx

import { TestimonialCard } from "@/components/ui/testimonial-card"

const testimonials = [
  {
    author: {
      name: "Emma Thompson",
      handle: "@emmaai",
      avatar: "https://cdn.21st.dev/assets/mirror/72/72795790e133d8399b0ae08aa7f605ddb153b6c0e17caa9e4d3f779e366ae02a.jpg"
    },
    text: "Using this AI platform has transformed how we handle data analysis. The speed and accuracy are unprecedented.",
    href: "https://twitter.com/emmaai"
  },
  {
    author: {
      name: "David Park",
      handle: "@davidtech",
      avatar: "https://cdn.21st.dev/assets/mirror/d8/d8e0b55ba06cb79571a9d9eec1fe7c784fe0a180438410700bbc6f24a7ff8c76.jpg"
    },
    text: "The API integration is flawless. We've reduced our development time by 60% since implementing this solution.",
    href: "https://twitter.com/davidtech"
  },
  {
    author: {
      name: "Sofia Rodriguez",
      handle: "@sofiaml",
      avatar: "https://cdn.21st.dev/assets/mirror/b5/b5e0a51f3f066510ff95875091d4de806e305cccf601826efce880394443ab2c.jpg"
    },
    text: "Finally, an AI tool that actually understands context! The accuracy in natural language processing is impressive.",
  },
  {
    author: {
      name: "James Chen",
      handle: "@jamesdev",
      avatar: "https://cdn.21st.dev/assets/mirror/eb/eb49a4a0da452f9c08b9679fe43f787ecfa4689b3867eac2c8a9b0b6dfba8a02.jpg"
    },
    text: "Game-changing ML capabilities. We've automated our entire data pipeline with incredible accuracy.",
    href: "https://twitter.com/jamesdev"
  },
  {
    author: {
      name: "Aisha Patel",
      handle: "@aishatech",
      avatar: "https://cdn.21st.dev/assets/mirror/5c/5ca27ce1db472d777a41190619d8f20e6593cad453a3c8e621caf6f9530a350c.jpg"
    },
    text: "The real-time processing capabilities are mind-blowing. Our team's productivity has doubled.",
    href: "https://twitter.com/aishatech"
  },
  {
    author: {
      name: "Michael Kim",
      handle: "@mikeai",
      avatar: "https://cdn.21st.dev/assets/mirror/34/3428c156f286d10f75dd0a97067134316d7d2339377b72694d000d2766dd42a7.jpg"
    },
    text: "Best decision we made was switching to this platform. The AI models are incredibly accurate and easy to deploy.",
  }
]

export function TestimonialCardDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      <div className="space-y-4">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((testimonial, i) => (
            <TestimonialCard key={i} {...testimonial} />
          ))}
        </div>
      </div>
    </div>
  )
}