Components
Loading preview...
Animated Photo Stack A playful, layered card component that displays team or profile photos in a stacked, draggable style with smooth animations. Perfect for showcasing creative teams, communities, or social highlights in an engaging way.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/photo-stackimport {
InteractivePhotoStack,
PhotoStackItem,
} from "@/components/ui/photo-stack";
// Sample data for the demo, matching the new PhotoStackItem interface
const showcaseItems: PhotoStackItem[] = [
{
src: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1887&auto=format&fit=crop",
name: "Alexandre",
},
{
src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=1887&auto=format&fit=crop",
name: "Isabella",
},
{
src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1964&auto=format&fit=crop",
name: "Sophia",
},
{
src: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop",
name: "Mia",
},
{
src: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?q=80&w=1964&auto=format&fit=crop",
name: "Charlotte",
},
];
// Demo component to showcase the photo stack
export default function InteractivePhotoStackDemo() {
return (
<div className="flex h-full min-h-[45rem] w-full items-center justify-center bg-background p-8">
<InteractivePhotoStack
items={showcaseItems}
title={
<>
Our Creative Team
</>
}
/>
</div>
);
}