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