Components
Loading preview...
The TestimonialCard component is a responsive, theme-adaptive UI element built with shadcn/ui that elegantly displays client testimonials. It supports text, images, and videos within a unified card layout featuring smooth transitions and dark/light mode compatibility. Each card includes a header, scrollable content area, and profile section, while video testimonials open inside a modal dialog with auto-play and reset controls. Designed for scalability, every card manages its own state independently—preventing global re-renders or hydration issues—making it ideal for showcasing multiple user reviews or success stories in modern web applications.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/multi-media-testimonial"use client";
import TestimonialCard, { Testimonial } from "@/components/ui/multi-media-testimonial";
const testimonials: Testimonial[] = [
{
name: "Alice Johnson",
profile: "https://github.com/shadcn.png",
title: "Improved Interview Workflow",
designation: "Software Engineer",
content:
"Ruvy transformed the way I manage my interviews. Highly recommended for professionals looking to save time!",
},
{
name: "Bob Smith",
profile: "https://github.com/shadcn.png",
title: "Simplicity at Its Best",
designation: "Product Manager",
content:
"The simplicity of this platform is unmatched. Perfect for small teams and startups.",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/three-dwall-calendar-dark.jpg",
},
{
name: "Charlie Lee",
profile: "https://github.com/shadcn.png",
title: "Creative and Efficient Platform",
designation: "UX Designer",
content: "",
mediaUrl: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/crm(1)(1)(1).mp4",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
type: "text",
name: "Diana Prince",
profile: "https://github.com/shadcn.png",
title: "Flawless Scheduling Experience",
designation: "Full Stack Developer",
content:
"The UI is sleek, intuitive, and makes scheduling interviews a breeze. 10/10 experience!",
rating: 5,
},
{
name: "Ethan Hunt",
profile: "https://github.com/shadcn.png",
title: "Streamlined Pipeline Management",
designation: "DevOps Engineer",
content:
"Managing my pipelines has never been easier thanks to this platform. Excellent UX!",
},
{
name: "Fiona Gallagher",
profile: "https://github.com/shadcn.png",
title: "Smooth and Intuitive Interface",
designation: "Frontend Developer",
content: "",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
name: "George Martin",
profile: "https://github.com/shadcn.png",
title: "Visually Stunning Design",
designation: "Backend Developer",
content: "",
mediaUrl: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/crm(1)(1)(1).mp4",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
name: "Hannah Lee",
profile: "https://github.com/shadcn.png",
title: "Efficient Testing Workflow",
designation: "QA Engineer",
content:
"Testing has become more efficient with the tools provided here. Very intuitive and well-designed.",
},
{
type: "text",
name: "Ian Wright",
profile: "https://github.com/shadcn.png",
title: "Time-Saving Integration",
designation: "Data Scientist",
content:
"I can now schedule interviews without leaving my workspace. Saves so much time!",
},
{
name: "Jane Doe",
profile: "https://github.com/shadcn.png",
title: "Clean Visual Presentation",
designation: "AI Researcher",
content: "",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/ripple-distortion-dark.png",
},
{
name: "Kyle Brown",
profile: "https://github.com/shadcn.png",
title: "Smooth Playback Experience",
designation: "UI Designer",
content: "",
mediaUrl: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/crm(1)(1)(1).mp4",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
name: "Laura Kim",
profile: "https://github.com/shadcn.png",
title: "Simple Yet Powerful",
designation: "Full Stack Developer",
content:
"The simplicity of this platform is unmatched. Perfect for small teams and startups.",
},
{
name: "Michael Scott",
profile: "https://github.com/shadcn.png",
title: "Organized Interview Management",
designation: "Project Manager",
content:
"I can track and organize interviews effortlessly. Love the clean UI and responsiveness.",
},
{
name: "Nina Patel",
profile: "https://github.com/shadcn.png",
title: "Elegant Visual Experience",
designation: "Mobile Developer",
content: "",
mediaUrl: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/crm(1)(1)(1).mp4",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
name: "Oscar Wilde",
profile: "https://github.com/shadcn.png",
title: "Impressive User Flow",
designation: "Content Strategist",
content: "",
mediaUrl: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/crm(1)(1)(1).mp4",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
name: "Pam Beesly",
profile: "https://github.com/shadcn.png",
title: "Showcasing Client Feedback",
designation: "Graphic Designer",
content:
"Love the clean testimonial cards and how easy it is to showcase our client feedback.",
},
{
name: "Quentin Tarantino",
profile: "https://github.com/shadcn.png",
title: "Perfect for Creative Professionals",
designation: "Video Editor",
content: "",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/tag-cloud-select-dark.jpg",
},
{
name: "Rachel Green",
profile: "https://github.com/shadcn.png",
title: "Enhanced Collaboration",
designation: "Marketing Specialist",
content: "",
mediaUrl: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/crm(1)(1)(1).mp4",
thumbnail: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/dashboard-gradient.png",
},
{
name: "Steve Rogers",
profile: "https://github.com/shadcn.png",
title: "Streamlined Recruitment Process",
designation: "Team Lead",
content:
"This platform streamlines our recruitment process like never before. Highly efficient!",
},
{
name: "Tina Fey",
profile: "https://github.com/shadcn.png",
title: "Beautifully Designed Platform",
designation: "Copywriter",
content:
"Beautifully designed, intuitive, and extremely user-friendly. Can't recommend enough!",
},
];
export default function TestimonialsDemoPage() {
return (
<section className="px-6 py-16">
<div className="max-w-7xl mx-auto">
<h2 className="text-center text-4xl font-bold mb-12 text-foreground">
Our clients love working with us because we go beyond great design to
deliver real results.
</h2>
{Array.isArray(testimonials) && testimonials.length > 0 ? (
<div className="columns-1 sm:columns-2 lg:columns-3 gap-3 [column-fill:_balance]">
{testimonials.map((t, i) => (
<TestimonialCard key={i} testimonial={t} />
))}
</div>
) : (
<p className="text-center text-muted-foreground">
No testimonials yet.
</p>
)}
</div>
</section>
);
}