Testimonial Carousel

Installation

1https://ui.sanjid.shop/r/testimonial-carousel.json

Props

Types

1interface Testimonial {2  id: number;3  name: string;4  role: string;5  text: string;6  avatar: string;7}

Usage

1"use client";2
3import { TestimonialCarousel } from "@/components/ui/testimonial-carousel";4
5const testimonials = [6  {7    id: 1,8    name: "Alice Johnson",9    role: "Product Designer",10    text: "This library has completely transformed the way we build UI. The animations feel premium and smooth.",11    avatar: "https://i.pravatar.cc/100?img=1",12  },13  {14    id: 2,15    name: "David Kim",16    role: "Full Stack Developer",17    text: "I love how reusable and consistent the components are. Saved us weeks of dev time.",18    avatar: "https://i.pravatar.cc/100?img=2",19  },20  {21    id: 3,22    name: "Sophia Lee",23    role: "UX Researcher",24    text: "The attention to detail in animations and responsiveness is simply top-notch.",25    avatar: "https://i.pravatar.cc/100?img=3",26  },27];28
29export default function Page() {30  return (31    <div className="flex min-h-screen items-center justify-center bg-neutral-100 dark:bg-neutral-900">32      <TestimonialCarousel testimonials={testimonials} />33    </div>34  );35}

Customization

You can easily customize the testimonials by modifying the data structure:

1const customTestimonials = [2  {3    id: 1,4    name: "Your Customer",5    role: "Their Role",6    text: "Your testimonial text here...",7    avatar: "/path/to/avatar.jpg",8  },9  // ... more testimonials10];

The component uses Tailwind CSS classes and can be customized by overriding the default styles:

1<TestimonialCarousel className="max-w-2xl" testimonials={testimonials} />

Features

• Smooth Framer Motion animations with spring transitions
• Drag and drop support for mobile devices
• Autoplay with pause on hover
• Keyboard navigation support
• Responsive design
• Light/Dark mode support
• Customizable testimonial data structure
• Accessible navigation controls
• Touch-friendly interactions