Testimonials

Showcase positive feedback from users in a carousel

npm run add Testimonials

Use the Testimonials component to display multiple customer or user feedbacks within a carousel:

---
const testimonials = [{
    text: '"Add user testimonies to improve trustworthiness"',
    name: 'Nicole Williams',
    role: 'Developer',
    avatar: {
        img: '/img/nicole.png',
        alt: 'Nicole'
    }
}, { ... }, { ... }, { ... }]
---

<Testimonials testimonials={testimonials} />

The Testimonials component is built on top of Testimonial, meaning you can use the same props in an array of objects to create a carousel of testimonials.

Titles

You can specify additional titles for the component using the title and subTitle props:

<Testimonials
    testimonials={testimonials}
    title="Testimonials"
    subTitle="What are users have to say"
    showIcon={true}
/>

Note that when showIcon is set to true, the showIcon prop on individual testimonial slides will be ignored.

Multiple Testimonials per Slide

This component uses the Carousel component, meaning you can also use carousel-specific props to further customize your testimonials. For example, you can use the following setup to display multiple testimonials per slide:

<Testimonials
    testimonials={[]}
    itemsPerSlide={2}
    pagination={{ type: 'dots' }}
/>

You can read more about how to customize the pagination on the Pagination component documentation.

API

type TestimonialsProps = {
    testimonials: TestimonialProps[]
    title?: string
    subTitle?: string
    showIcon?: boolean
    className?: string
} & Omit<CarouselProps, 'items'>