Components
Loading preview...
An interactive image stack component that displays images in a fanned-out card layout with smooth drag-to-cycle functionality. Built with React, Motion, and Next.js Image optimization.
@tonyzebastian
npx shadcn@latest add https://21st.dev/r/tonyzebastian/image-stackimport ImgStack from "@/components/ui/image-stack";
export default function DemoOne() {
const imageUrls: string[] = [
'https://res.cloudinary.com/dctgknnt7/image/upload/v1758731403/1_d8uozd.jpg',
'https://res.cloudinary.com/dctgknnt7/image/upload/v1758731402/5_ionpyy.jpg',
'https://res.cloudinary.com/dctgknnt7/image/upload/v1758731402/4_zeoqje.jpg',
'https://res.cloudinary.com/dctgknnt7/image/upload/v1758731402/3_nfdtim.jpg',
'https://res.cloudinary.com/dctgknnt7/image/upload/v1758731402/2_hme6yu.jpg',
];
return (
<main className="w-full p-6 flex">
<div className="w-full flex-1">
<div className="h-full flex items-center justify-center">
<ImgStack images={imageUrls} />
</div>
</div>
</main>
)
}