Image Stack

Cards 422

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Stack to your project and fits it to your theme.

Code

How Image Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import 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>
  )
}