Photo Stack

Galleries 1

About

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.

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

Code

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

Usage.tsx

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