Buy Template Now $65→
Skip to main content

ReviewCard

A reusable testimonial card component for showcasing customer reviews, social proof, and user feedback.

Each review card includes a profile image, customer name, optional role information, review text, and dynamic star ratings.

Features

  • Customer profile image support
  • Dynamic star ratings (0–5)
  • Optional role/company information
  • Hover animations
  • Responsive layout
  • Reusable styling via className
  • Accessible star ratings
  • Optimized Next.js images
  • Built with Lucide icons

Import the component using:

import ReviewCard from "@/components/ui/reviewCard";

Preview

ReviewCard Component Preview

Basic Example

import ReviewCard from "@/components/ui/reviewCard";
 
export default function Example() {
  return (
    <ReviewCard
      image="/images/users/john.jpg"
 
      name="John Doe"
 
      role="Founder at Acme"
 
      review="This product completely transformed our workflow and improved team productivity."
 
      noOfStars={5}
    />
  );
}

Props

ReviewCardProps

interface ReviewCardProps {
  /**
   * Customer profile image
   */
  image: string;
 
  /**
   * Customer name
   */
  name: string;
 
  /**
   * Optional role, company,
   * or additional metadata
   */
  role?: string;
 
  /**
   * Customer review content
   */
  review: string;
 
  /**
   * Rating from 0–5 stars
   * @default 5
   */
  noOfStars?: number;
 
  /**
   * Tailwind class for
   * active star color
   *
   * @default "text-yellow-400"
   */
  starsColor?: string;
 
  /**
   * Additional Tailwind classes
   */
  className?: string;
}

With Role Information

<ReviewCard
  image="/images/users/sarah.jpg"
 
  name="Sarah Johnson"
 
  role="Product Designer"
 
  review="Beautiful component and extremely easy to customize."
/>

Without Role Information

<ReviewCard
  image="/images/users/alex.jpg"
 
  name="Alex Brown"
 
  review="Setup only took a few minutes and the results were amazing."
/>

Custom Star Rating

<ReviewCard
  image="/images/users/jane.jpg"
 
  name="Jane Doe"
 
  review="Very useful component."
 
  noOfStars={4}
/>

Custom Star Color

<ReviewCard
  image="/images/users/jane.jpg"
 
  name="Jane Doe"
 
  review="Excellent experience."
 
  starsColor="text-primary"
/>

With Custom Styling

<ReviewCard
  className="max-w-md"
 
  image="/images/users/john.jpg"
 
  name="John Doe"
 
  review="Highly recommended."
/>

Example Data

{
  image: "/images/users/john.jpg",
 
  name: "John Doe",
 
  role: "Founder at Acme",
 
  review:
    "This platform helped us launch our product significantly faster.",
 
  noOfStars: 5
}

Star Ratings

5 Stars

<ReviewCard
  noOfStars={5}
  ...
/>

4 Stars

<ReviewCard
  noOfStars={4}
  ...
/>

3 Stars

<ReviewCard
  noOfStars={3}
  ...
/>

Best Practices

  • Keep reviews between 1 and 3 sentences.
  • Use high-quality profile images.
  • Keep names concise.
  • Use role information for credibility.
  • Limit star ratings between 0 and 5.
  • Keep testimonials authentic and specific.
  • Avoid overly long review text.
  • Use consistent avatar dimensions.

Accessibility

  • Profile images include descriptive alt text.
  • Star ratings include aria-label support.
  • Semantic article element improves structure.
  • Hover effects only enhance presentation.
  • Fully responsive across all screen sizes.

Ideal Use Cases

  • Customer testimonials
  • SaaS landing pages
  • Social proof sections
  • Marketing websites
  • Product pages
  • User feedback sections
  • Agency websites
  • Portfolio websites
  • Review carousels
  • Case study pages
NextreviewCarousel