Testimonial and review card component with author info, avatar, star rating, and quote styling. Perfect for displaying customer feedback and testimonials.
import { ReviewCard, type Review } from "@/components/ui/review-card";
import * as React from "react"
const reviews: Review[] = [
{
author: "John Smith",
position: "Senior Developer",
company: "Tech Corp",
text: "Great communication skills and excellent code quality. Would definitely work with again.",
rating: 4,
avatar: "https://cdn.21st.dev/assets/mirror/d8/d8e0b55ba06cb79571a9d9eec1fe7c784fe0a180438410700bbc6f24a7ff8c76.jpg",
},
{
author: "John Smith",
position: "CTO",
text: "Great communication skills and excellent code quality. Would definitely work with again.",
rating: 5,
avatar: "https://cdn.21st.dev/assets/mirror/ad/adf63af8a991aa82fc7bc0b822f223842c22d4b6386fbd927575f34f5eb4abef.jpg",
},
]
export default function ReviewCardDemo() {
return (
<div className="flex flex-col gap-6 p-6">
<h3 className="text-sm font-medium text-zinc-500">Review Cards</h3>
<div className="grid gap-6 md:grid-cols-2">
{reviews.map((review, index) => (
<ReviewCard key={index} review={review} />
))}
</div>
{/* Minimal Review */}
<h3 className="text-sm font-medium text-zinc-500 mt-4">Minimal</h3>
<ReviewCard
review={{
author: "Anonymous User",
text: "Simple and effective!",
rating: 4,
}}
className="max-w-sm"
/>
</div>
)
}