Skip to main content

​
Overview

Animated Testimonials is a component that displays user testimonials with smooth transitions and optional autoplay. Perfect for showcasing customer feedback on landing pages.

​
Usage

<template>
  <AnimatedTestimonials
    :testimonials="testimonials"
    :autoplay="true"
    :duration="5000"
  />
</template>

<script setup>
const testimonials = [
  {
    quote: "This product changed my life!",
    name: "John Doe",
    designation: "CEO",
    image: "/avatar.jpg"
  },
  {
    quote: "Exceptional quality and service!",
    name: "Jane Smith",
    designation: "Product Manager",
    image: "/avatar2.jpg"
  }
]
</script>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
testimonialsTestimonial[][]An array of testimonial objects containing quote, name, image, and designation.
autoplaybooleanfalseWhether to cycle through testimonials automatically.
durationnumber5000Duration (in milliseconds) to wait before automatically transitioning to the next testimonial.

​
Testimonial Object

Each testimonial object must contain the following fields:
PropertyTypeDescription
quotestringThe testimonial text.
namestringThe name of the person or entity providing the testimonial.
designationstringThe position or role of the testimonial author (e.g., CEO, user).
imagestringURL of the image or avatar for the testimonial author.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us