AnimatedTestimonials

A testimonial section with multiple display variants and smooth animations.

"This design system transformed how our team builds products. We ship 3x faster with consistent, beautiful UI."

Sarah Chen

VP of Engineering at TechCorp

Basic Usage

import { AnimatedTestimonials } from "@corew500/ui"

const testimonials = [
  {
    id: "1",
    quote: "This product changed how we work. Highly recommended!",
    author: "Jane Doe",
    role: "CEO",
    company: "Acme Inc",
    avatar: "/avatars/jane.jpg",
  },
  {
    id: "2",
    quote: "Outstanding support and incredible features.",
    author: "John Smith",
    role: "CTO",
    company: "Tech Corp",
    avatar: "/avatars/john.jpg",
  },
]

<AnimatedTestimonials testimonials={testimonials} />

Variants

Single (Carousel)

One testimonial at a time with navigation:

<AnimatedTestimonials variant="single" testimonials={testimonials} />

Cards (Grid)

Display testimonials in a responsive grid:

<AnimatedTestimonials variant="cards" testimonials={testimonials} />

Stacked

Overlapping cards with 3D effect:

<AnimatedTestimonials variant="stacked" testimonials={testimonials} />

Auto Play

<AnimatedTestimonials
  testimonials={testimonials}
  autoPlay
  interval={4000}
/>

With Title

<AnimatedTestimonials
  title="What Our Customers Say"
  description="Trusted by thousands of companies worldwide"
  testimonials={testimonials}
/>

Without Avatars

const testimonials = [
  {
    id: "1",
    quote: "Great product!",
    author: "Jane Doe",
    role: "CEO",
    company: "Acme Inc",
    // No avatar - will show initials
  },
]

<AnimatedTestimonials testimonials={testimonials} />

Props

Prop	Type	Default	Description
`testimonials*`	Testimonial[]	—	Array of testimonials to display
`autoPlay`	enum	`true`	Enable auto-play for single variant
`interval`	number	`5000`	Auto-play interval in milliseconds
`showControls`	enum	`true`	Show navigation controls (single variant)
`variant`	enum	`single`	—
`size`	enum	`default`	—

Testimonial Type

interface Testimonial {
  id: string
  quote: string
  author: string
  role?: string
  company?: string
  avatar?: string
}

TestimonialCard

Use the individual card component for custom layouts:

import { TestimonialCard } from "@corew500/ui"

<TestimonialCard testimonial={testimonial} />

Design Tokens

| Token | Description | |-------|-------------| | --testimonial-card-width | Card width | | --testimonial-stagger-delay | Animation stagger timing | | --testimonial-transition-duration | Transition timing |

Accessibility

Navigation buttons have aria-label
Avatar images have alt text
Uses semantic blockquote for quotes