ComponentsCarousels & media
Testimonial Stack
A pile of portraits beside a quotation; stepping through brings the next portrait to the top.
This example uses generated pictures and sample data from this site: art.ts and data.ts. Copy those files from the repository, or use your own images and data in their place.
"use client";
import { TestimonialStack } from "@/components/miyuki-ui/testimonial-stack";
import { avatar } from "@/registry/lib/art";
import { people, quotes } from "@/registry/lib/data";
const testimonials = ["Lars Eriksen", "Kenji Mori", "Élodie Martin", "Ingrid Solberg"].map((name) => {
const person = people.find((p) => p.name === name)!;
const quote = quotes.find((q) => q.name === name)!;
return { quote: quote.text, name, designation: person.role, src: avatar(person.handle, 480) };
});
export default function TestimonialStackDemo() {
return <TestimonialStack testimonials={testimonials} aria-label="What our guests say" className="max-w-4xl" />;
}Install
npx shadcn@latest add @miyuki-ui/testimonial-stackThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
TestimonialStack
Prop
Type