Scrolling Testimonials

Testimonials

About

An infinite vertical auto-scrolling wall of customer testimonials with multi-column layout, independent per-column speeds, reverse direction, gradient fade masks, and avatar initials fallback.

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

Code

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

Usage.tsx

import { ScrollingTestimonials } from "@/components/ui/scrolling-testimonials";

const testimonials = [
  {
    id: "1",
    quote:
      "This tool completely changed how our team ships features. Setup took minutes.",
    name: "Ava Thompson",
    role: "Product Manager",
    company: "Northwind",
    rating: 5,
  },
  {
    id: "2",
    quote: "The best developer experience I've had with a UI library in years.",
    name: "Liam Chen",
    role: "Frontend Engineer",
    company: "Vectra",
    rating: 5,
  },
  {
    id: "3",
    quote:
      "Our conversion rate jumped after redesigning the landing page with this.",
    name: "Sofia Martins",
    role: "Growth Lead",
    company: "Hollow",
    rating: 4,
  },
  {
    id: "4",
    quote:
      "Clean, accessible, and fast. Exactly what we needed for our design system.",
    name: "Noah Williams",
    role: "Design Systems Lead",
    company: "Fable",
    rating: 5,
  },
  {
    id: "5",
    quote:
      "Support was incredibly responsive and the docs answered every question.",
    name: "Maya Patel",
    role: "CTO",
    company: "Orbital",
    rating: 5,
  },
  {
    id: "6",
    quote: "We migrated our entire component library over in a single sprint.",
    name: "Ethan Brooks",
    role: "Engineering Manager",
    company: "Cursive",
    rating: 4,
  },
  {
    id: "7",
    quote:
      "Beautifully designed defaults that still let us fully customize the theme.",
    name: "Isla Rodriguez",
    role: "UI Designer",
    company: "Framewire",
    rating: 5,
  },
  {
    id: "8",
    quote: "Our onboarding flow feels so much more polished now.",
    name: "Jack Nguyen",
    role: "Founder",
    company: "Loopline",
    rating: 5,
  },
  {
    id: "9",
    quote: "Performance is excellent even with hundreds of items rendered.",
    name: "Zoe Anderson",
    role: "Staff Engineer",
    company: "Metric",
    rating: 4,
  },
];

export default function ScrollingTestimonialsDemo() {
  return <ScrollingTestimonials testimonials={testimonials} />;
}