Image Showcase

Cards 459

About

Animated Image Showcase This component displays a title, subtitle, and a fanned-out stack of images. On hover, the images gracefully spread out and scale up, creating an engaging user experience. It's fully responsive and theme-adaptive.

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

Code

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

Usage.tsx

// demo.tsx

import * as React from "react";
import { PhotoStackCard } from "@/components/ui/image-showcase";

// --- DEMO DATA ---
const memoriesData = [
  {
    images: [
      "https://cdn.21st.dev/assets/mirror/89/895147e2a8a4ce73269b083530e5d37affd0643b4205dcc2203aec85b8fd4843.jpg",
      "https://cdn.21st.dev/assets/mirror/62/6233a1d2db5b9556fd2e8acbf9941f93781295d6de1bf9365184ec6b430bf2e9.jpg",
      "https://cdn.21st.dev/assets/mirror/33/3317c3e478b50a44ae6d8d639da282e4d1ced334f3b8cd7d2492613e5a5b6c9c.jpg",
    ],
    category: "TRAVEL",
    title: "Black Sea",
    subtitle: "June 2023",
  },
  {
    images: [
      "https://cdn.21st.dev/assets/mirror/40/4039f60485eef469d7bd8489b89dfdbe2696544cc7f034c333826539cd9938f3.jpg",
      "https://cdn.21st.dev/assets/mirror/61/61323420d13886ca1c49e9be654268bea986790223a8af2a41b24cbbcfff3ecb.jpg",
      "https://cdn.21st.dev/assets/mirror/b8/b8f88ed1fe79ceee93eab2e53d60a0dfda6ef129524b72f5419a61791c86535d.jpg",
    ],
    category: "ADVENTURE",
    title: "Alps",
    subtitle: "January 2024",
  },
  {
    images: [
      "https://cdn.21st.dev/assets/mirror/24/246fe7e5c10456561a7b86d63bafe431f8877dc9ad71341b61900579e08f59cd.jpg",
      "https://cdn.21st.dev/assets/mirror/8e/8e81c8c6f3fa71af3402ec84a8e9f98237461c94d825c170f64e2957d8926b86.jpg",
      "https://cdn.21st.dev/assets/mirror/56/567e2dbf984c4f3c2c37c9275627b31a3a1bebf05f01510c903e044812c97473.jpg",
    ],
    category: "RELAXATION",
    title: "Maldives",
    subtitle: "August 2022",
  },
];

// --- DEMO COMPONENT ---
export default function PhotoStackCardDemo() {
  const [activeIndex, setActiveIndex] = React.useState<number | null>(1); // Default to the middle card

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <div className="relative flex h-72 w-full max-w-3xl items-center justify-center">
        {memoriesData.map((mem, index) => (
          <div
            key={mem.title}
            className="absolute"
            style={{
                // Position cards to overlap for a better visual effect
                transform: `translateX(${(index - 1) * 200}px)`,
            }}
          >
            <PhotoStackCard
              {...mem}
              isActive={index === activeIndex}
              onClick={() => setActiveIndex(index)}
            />
          </div>
        ))}
      </div>
    </div>
  );
}