A responsive testimonial card component with rating stars and author information.
import { Testimonial } from "@/components/ui/testimonial-card"
const testimonials = [
{
name: "Sarah Johnson",
role: "Product Manager",
company: "Amazun",
rating: 5,
image: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg",
testimonial: "This library has completely transformed how we build our UI components. The attention to detail and smooth animations make our application stand out. Highly recommended!"
},
{
name: "John Doe",
role: "Software Engineer",
company: "Goggle",
rating: 4,
image: "https://cdn.21st.dev/assets/mirror/c9/c9038553755a8c1c3753ccd0a14af4854745b83bd3a97609f81d2c0d48f35517.jpg",
testimonial: "The components are well documented and easy to customize. The code quality is top-notch and the support is excellent. I'm very happy with my purchase."
},
{
name: "Emily Chen",
role: "UX Designer",
company: "Microsift",
rating: 5,
image: "https://cdn.21st.dev/assets/mirror/db/db395a118244043772f21d6cd644901eaf89eab5a3dfcedcc73c255a4d6417e0.jpg",
testimonial: "The accessibility features and design system consistency are impressive. It's saved us countless hours in development time."
}
]
function TestimonialDemo() {
return (
<div className="container py-10">
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{testimonials.map((testimonial) => (
<Testimonial key={testimonial.name} {...testimonial} />
))}
</div>
</div>
)
}
export { TestimonialDemo }Part of HextaUI — browse the full library on 21st.dev.