Animated Testimonials

Minimal testimonials with image and quote for clean, modern design.

Installation

npx shadcn@latest add @scrollxui/animated-testimonials

Usage

import { AnimatedTestimonials } from '@/components/ui/animated-testimonials';

<AnimatedTestimonials
  data={[
    {
      description: 'ScrollX-UI has completely transformed how I build interfaces. The animations are silky smooth, and the components are modular and responsive.',
      image: 'https://images.unsplash.com/photo-1611558709798-e009c8fd7706?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
      name: 'Isabelle Carlos',
      handle: '@isabellecarlos'
    },
    {
      description: 'I love how ScrollX-UI makes my projects look professional with minimal effort. The documentation is clear and the community is super helpful.',
      image: 'https://plus.unsplash.com/premium_photo-1692340973636-6f2ff926af39?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
      name: 'Lana Akash',
      handle: '@lanaakash'
    },
    {
      description: 'The smooth scrolling animations and intuitive components in ScrollX-UI save me hours of development time!',
      image: 'https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
      name: 'Liam O'Connor',
      handle: '@liamoc'
    }
  ]}
/>

API Reference

AnimatedTestimonials

The root component for displaying animated testimonial cards.

Props

Property	Type	Default	Description
`data`	Array<Testimonial>	`required`	An array of testimonial objects to display.
`className`	string	`—`	Additional CSS classes for the container.
`cardClassName`	string	`—`	Additional CSS classes for individual testimonial cards.
`name`	string	`required`	Name of the person giving the testimonial.
`image`	string	`required`	URL of the profile image.
`description`	string	`required`	Testimonial message or feedback.
`handle`	string	`required`	Social media handle or role (e.g., @john or 'Founder, X').