A draggable deck of stacked photo cards where dragging or tapping the top card sends it to the back to reveal the next one, with spring animation and reduced-motion support.
import PhotoStack from "@/components/ui/photo-stack";
export default function PhotoStackDemo() {
const photos = [
{
id: "1",
src: "https://cdn.21st.dev/assets/localized/0d88a3e03ee7bbd2daf4abb51bebdf44d0f70a9517231732bf0c03970be41de7.jpg",
alt: "Maya Solis",
name: "Maya Solis",
role: "Product designer",
},
{
id: "2",
src: "https://cdn.21st.dev/assets/localized/3e5ffb7fa24ee4cee53c87faf86293579a36776ff2121320df6bd2c26ccbc7e6.jpg",
alt: "Luca Moretti",
name: "Luca Moretti",
role: "Support lead",
},
{
id: "3",
src: "https://cdn.21st.dev/assets/localized/8faa3ba619fbdaa73718ddcbf954853888b0e3fb3b9ea1914849e005f7a66022.jpg",
alt: "Sasha Kim",
name: "Sasha Kim",
role: "Staff engineer",
},
];
return (
<div className="flex h-screen w-full items-center justify-center">
<PhotoStack photos={photos} />
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.