ReviewCarousel

A responsive testimonial carousel for showcasing customer feedback, success stories, and social proof.

It features automatic slide progression, smooth animated transitions, star ratings, slide indicators, and manual navigation controls while remaining fully responsive across all devices.

Features

Auto-playing review slider
Manual previous and next navigation
Smooth animated transitions
Dynamic star ratings
Responsive design
Slide indicators
Infinite looping
Optional auto slide controls
Customizable star colors
Automatically hides navigation when only one review exists
Built with Motion and Next.js Image

Import the component using:

import ReviewCarousel from "@/components/ui/reviewCarousel";

Preview

Basic Example

import ReviewCarousel from "@/components/ui/reviewCarousel";
 
export default function Example() {
  return (
    <ReviewCarousel
      autoSlide
 
      autoSlideDuration={5000}
 
      items={[
        {
          review:
            "This product completely transformed our workflow.",
 
          name: "John Doe",
 
          role: "Founder, Acme",
 
          image: "/images/users/john.jpg",
 
          noOfStars: 5,
        },
 
        {
          review:
            "Excellent experience from start to finish.",
 
          name: "Sarah Johnson",
 
          role: "Product Designer",
 
          image: "/images/users/sarah.jpg",
 
          noOfStars: 5,
        },
 
        {
          review:
            "Very easy to integrate and customize.",
 
          name: "Alex Brown",
 
          role: "Software Engineer",
 
          image: "/images/users/alex.jpg",
 
          noOfStars: 4,
        },
      ]}
    />
  );
}

Props

ReviewCarouselProps

interface ReviewCarouselProps {
  /**
   * Review data
   */
  items: ReviewItem[];
 
  /**
   * Tailwind color class
   * applied to active stars
   *
   * @default "text-yellow-400"
   */
  starsColor?: string;
 
  /**
   * Enables automatic slide rotation
   *
   * @default true
   */
  autoSlide?: boolean;
 
  /**
   * Duration between slides
   * (milliseconds)
   *
   * @default 5000
   */
  autoSlideDuration?: number;
 
  /**
   * Additional Tailwind classes
   */
  className?: string;
}

ReviewItem

interface ReviewItem {
  /**
   * Customer review content
   */
  review: string;
 
  /**
   * Customer name
   */
  name: string;
 
  /**
   * Customer role
   */
  role: string;
 
  /**
   * Customer image
   */
  image: string;
 
  /**
   * Star rating
   *
   * @default 5
   */
  noOfStars?: number;
}

Enable Auto Slide

<ReviewCarousel
  autoSlide
  items={reviews}
/>

Disable Auto Slide

<ReviewCarousel
  autoSlide={false}
  items={reviews}
/>

Auto Slide Duration

<ReviewCarousel
  autoSlideDuration={7000}.  //milliseconds
  items={reviews}
/>

Custom Star Color

<ReviewCarousel
  starsColor="text-primary"
 
  items={reviews}
/>

With Custom Styling

<ReviewCarousel
  className="bg-muted rounded-3xl"
 
  items={reviews}
/>

Review Item Example

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

Example Data

const reviews = [
  {
    review:
      "Outstanding product with an amazing developer experience.",
 
    name: "Sarah Johnson",
 
    role: "Product Designer",
 
    image: "/images/users/sarah.jpg",
 
    noOfStars: 5,
  },
 
  {
    review:
      "Setup only took a few minutes and everything worked perfectly.",
 
    name: "Alex Brown",
 
    role: "Software Engineer",
 
    image: "/images/users/alex.jpg",
 
    noOfStars: 5,
  },
 
  {
    review:
      "Our team's productivity improved immediately after switching.",
 
    name: "John Doe",
 
    role: "Founder, Acme",
 
    image: "/images/users/john.jpg",
 
    noOfStars: 4,
  },
];

Best Practices

Keep reviews between 1 and 3 sentences.
Use high-quality profile images.
Keep names short and readable.
Use meaningful role information.
Use between 3 and 6 reviews for best results.
Keep autoSlideDuration between 4000 and 7000 milliseconds.
Use consistent image dimensions.
Keep testimonials authentic and specific.

Accessibility

Profile images include descriptive alt text.
Navigation buttons include aria-label support.
Slide indicators are keyboard accessible.
Motion animations only enhance presentation.
Fully responsive across all device sizes.

Ideal Use Cases

Customer testimonials
SaaS landing pages
Social proof sections
Product showcases
Agency websites
Marketing websites
Startup websites
Portfolio websites
Case study pages
Customer success stories