Testimonial Slider

Testimonials 714

About

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

Code

How Testimonial Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { TestimonialSlider } from "@/components/ui/testimonial-slider-1";

// 1. Define the review data
const reviews = [
  {
    id: 1,
    name: "Ashley Right",
    affiliation: "Pinterest",
    quote:
      "Professionals in their craft! All products were super amazing with strong attention to details, comps and overall vibe.",
    // Image from the provided screenshot
    imageSrc:
      "https://cdn.21st.dev/assets/mirror/68/6825660877f11755124fcd50de62b61ccfb4c7cf8c0309772191b876c24ea6b0.jpg",
    thumbnailSrc:
      "https://cdn.21st.dev/assets/mirror/cb/cb1789e8a476b42781dca88adee4aaf0086cc48d569b30cbd88c59a1513948d8.jpg",
  },
  {
    id: 2,
    name: "Jacob Jose",
    affiliation: "New York Times",
    quote:
      "Unlimited, instant access to hundreds of premium quality resources created by designers for designers.",
    // Image from the provided screenshot
    imageSrc:
      "https://cdn.21st.dev/assets/mirror/f8/f8598578acf79ffb1e11b1b51bd7c3b5ffc886613cc5b56f0b01ec4fad02ce86.jpg",
    thumbnailSrc:
      "https://cdn.21st.dev/assets/mirror/de/de695d4a45c252befd4d0efda058ea818c578888c8ca789d2e0813e6f8dd7fe7.jpg",
  },
  {
    id: 3,
    name: "Elara Sands",
    affiliation: "Behance",
    quote:
      "The attention to detail is immaculate. Every component feels polished and ready for production.",
    // Thumbnail from the provided screenshot
    imageSrc:
      "https://cdn.21st.dev/assets/mirror/f7/f7873a119c67bd97a856287d1c9ece010e73759c4b99778aebbddc5600e0e6b2.jpg",
    thumbnailSrc:
      "https://cdn.21st.dev/assets/mirror/34/345b2cd71256cbf82626838d602bce2aa2365e7e8a7d4d6471f47796b8284a7b.jpg",
  },
  {
    id: 4,
    name: "Marcus Cole",
    affiliation: "Dribbble",
    quote:
      "A true time-saver. I can focus on my core logic instead of pixel-pushing. Highly recommended.",
    // Thumbnail from the provided screenshot
    imageSrc:
      "https://cdn.21st.dev/assets/mirror/5d/5d326792148ee065915f583fc4c0899788df7a4528fc1afa9a23d77f0094bd46.jpg",
    thumbnailSrc:
      "https://cdn.21st.dev/assets/mirror/e0/e0771e3ed7565b609fe136edf2f4e7d6f5678f4425406d7272c0ac90c70f3e51.jpg",
  },
  {
    id: 5,
    name: "Serena V.",
    affiliation: "Figma",
    quote:
      "This is the design system I've been waiting for. It's flexible, accessible, and beautiful.",
    imageSrc:
      "https://cdn.21st.dev/assets/mirror/0e/0e1c3a5f8ca45975a2f6a2b8e2748ddb2526b3befbd40a424c6c02e0bd137510.jpg",
    thumbnailSrc:
      "https://cdn.21st.dev/assets/mirror/2d/2dc235c6405e5bd98b5f988d39d0ab32d764cec2916310af3a35e4898c194e90.jpg",
  },
];

// 2. Render the component with the data
export default function TestimonialSliderDemo() {
  return (
    <div className="w-full">
      <TestimonialSlider reviews={reviews} />
    </div>
  );
}