The TestimonialAccordion component is an interactive, auto-rotating testimonial showcase designed for modern web applications. It combines the functionality of an accordion with dynamic progress tracking to create a visually engaging and user-friendly experience. Each testimonial is presented as a collapsible section, allowing users to expand individual reviews without disrupting the overall layout. The component includes per-item progress memory—so when users switch between testimonials, each one resumes from its own progress point. It also supports automatic rotation, making it ideal for homepages or landing sections where testimonials cycle through automatically. With a fixed, stable layout that prevents width or height jumps, responsive design using Tailwind CSS, and support for company logos, avatars, and quotes, this component offers both aesthetic appeal and technical smoothness. It’s perfect for showcasing client feedback, success stories, or partner reviews in a clean, animated, and professional manner.
import { TestimonialAccordion } from "@/components/ui/testimonial-accordion";
export default function DemoPage() {
const testimonials = [
{
id: "descript",
company: "Descript",
logo: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen-dark.png",
stat: "12 major projects completed",
content: {
quote:
"This product transformed my workflow — it's intuitive, efficient, and fun to use!",
name: "Samantha Lee",
role: "Productivity Coach",
avatar: "https://randomuser.me/api/portraits/women/50.jpg",
},
},
{
id: "ramp",
company: "Ramp",
logo: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen-dark.png",
stat: "Boosted efficiency by 40%",
content: {
quote:
"A seamless experience that fits right into our daily workflow — love it!",
name: "Alex Rivera",
role: "Finance Lead",
avatar: "https://randomuser.me/api/portraits/men/31.jpg",
},
},
{
id: "watershed",
company: "Watershed",
logo: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen-dark.png",
stat: "Reduced errors by 75%",
content: {
quote:
"It’s incredible how simple tasks feel automated — definitely worth every penny.",
name: "Priya Sharma",
role: "Operations Manager",
avatar: "https://randomuser.me/api/portraits/women/47.jpg",
},
},
];
return (
<main className="min-h-screen bg-gradient-to-b from-background to-muted/30 text-foreground flex items-center justify-center">
<TestimonialAccordion
title="Loved by teams worldwide"
buttonText="View all reviews"
testimonials={testimonials}
autoRotate
rotationDelay={8000}
progressSpeed={8000}
/>
</main>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.