Image Expand Testimonial
An interactive testimonial section with smooth image expansion animations, autoplay, and responsive design.
01 / 04
Reviews
Sarah Chen
TechCorp Inc.
“This component library has transformed our development workflow. The attention to detail is remarkable.”
Installation
pnpm dlx rareui add imageExpandTestimonial
Usage
1
Import the component
import { ImageExpandTestimonial } from "@/components/rareui/Sections/imageExpandTestimonial";
2
Define your testimonials data
const testimonials = [
{
id: "1",
name: "Sarah Chen",
role: "VP of Engineering",
company: "TechCorp Inc.",
quote: "This component library has transformed our development workflow.",
image: "https://example.com/image.jpg",
rating: 5,
},
// Add more testimonials...
];
3
Use in your application
export default function TestimonialsSection() {
return (
<ImageExpandTestimonial
testimonials={testimonials}
autoPlayInterval={3000}
/>
);
}
Features
Framer Motion powered spring animations for fluid image transitions.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | Testimonial[] | - | Array of testimonial objects containing id, name, role, company, quote, image, and optional rating. |
autoPlayInterval | number | 5000 | Interval in milliseconds for auto-advancing testimonials. |
className | string | - | Additional CSS classes for the container. |