║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Animated Testimonials description: Minimal testimonials with image and quote for clean, modern design.

<ComponentPreview name="animatedtestimonials-demo" className="p-0" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="animated-testimonials" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<p> <code>animated-testimonials.tsx</code> </p> <ComponentSource name="animated-testimonials" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p> ```jsx import {(ClassValue, clsx)} from "clsx"; import {twMerge} from "tailwind-merge";

export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

</Steps>
  </TabsContent>
</Tabs>

<Step>Add these animations to your `tailwind.config.ts:`</Step>
<p>
  <code>tailwind.config.ts</code>
</p>
```ts
// tailwind.config.ts
export default {
  theme: {
    extend: {
      keyframes: {
        "canopy-x": {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "canopy-y": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
      animation: {
        "canopy-horizontal": "canopy-x var(--duration) infinite linear",
        "canopy-vertical": "canopy-y var(--duration) linear infinite",
      },
    },
  },
}

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

<PropsTable rows={[ { prop: "data", type: "Array<Testimonial>", default: "required", description: "An array of testimonial objects to display." }, { prop: "name", type: "string", default: "required", description: "Name of the person giving the testimonial. Used inside each data item." }, { prop: "image", type: "string", default: "required", description: "URL of the profile image. Used inside each data item." }, { prop: "description", type: "string", default: "required", description: "Testimonial message or feedback. Used inside each data item." }, { prop: "handle", type: "string", default: "required", description: "Social media handle or role (e.g., @john or 'Founder, X')." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║