Rotating Testimonial Slider

This code implements a visually appealing and functional testimonial slider component. It addresses the need to showcase multiple testimonials in a dynamic and engaging way, improving user experience and content presentation. The component fetches an array of testimonials, each containing an image, quote, name, and role. It uses a state variable (`active`) to track the currently displayed testimonial. The slider cycles through testimonials automatically at a set interval (configurable via `autorotateTiming`). Users can manually switch between testimonials by clicking the buttons displayed below. The smooth transitions are handled by the `Transition` component from the `@headlessui/react` library. The `useEffect` hook manages the autorotation and ensures the parent container dynamically adjusts height to accommodate the content. The component utilizes the `Image` component from Next.js for efficient image loading and rendering. The styling leverages a CSS-in-JS approach, although it could be swapped for a CSS framework. It uses a `ref` to access the DOM element and adjust the height dynamically. This component is ideal for websites and applications needing to showcase client testimonials, reviews, or similar content. For instance, it could be used on a landing page to build trust, on a product page to highlight user feedback, or within a case study section to present client success stories. The component features smooth animations using custom easing functions. The design is clean and modern, with a focus on accessibility and user experience. Users can choose to disable the automatic rotation for a more controlled experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Rotating Testimonial Slider to your project and fits it to your theme.

import { FancyTestimonialsSlider } from "@/components/ui/rotating-testimonial-slider";

export default function DemoOne() {
  const testimonials = [
    {
      img: "https://cdn.21st.dev/assets/mirror/3f/3fff7c77ac4d967f819d6c3754aaace800f8d519b581eafcbdca01ec8b3a6ebb.jpg",
      quote: "21st.dev's components make building UIs effortless great work!",
      name: "Jessie J",
      role: "Acme LTD",
    },
    {
      img: "https://cdn.21st.dev/assets/mirror/20/20bb8458e0bb0345aae5ab6a975650d1210fdfc5721729b456f7342fc59b3113.jpg",
      quote:
        "21st.dev simplifies complex designs with ready-to-use components.",
      name: "Nick V",
      role: "Malika Inc.",
    },
    {
      img: "https://cdn.21st.dev/assets/mirror/8b/8ba1641b9bdbbfbcd96e81d144f40b004cbcdde40250f6a248eed4987ac4a98f.jpg",
      quote: "With 21st.dev, creating responsive UIs is a breeze.",
      name: "Amelia W",
      role: "Panda AI",
    },
  ];
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-lg bg-background">
      <div className="mt-[64px] flex justify-center px-12">
        <FancyTestimonialsSlider testimonials={testimonials} />
      </div>
    </div>
  );
}