Interactive Image Selector

Galleries 14

About

An animated image gallery grid with a toggle selection mode for selecting, sharing, and deleting multiple photos.

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

Code

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

Usage.tsx

"use client";

import InteractiveImageSelector, {
  type ImageData,
} from "@/components/ui/interactive-image-selector";
import { useEffect, useState } from "react";

const demoImages: ImageData[] = [
  {
    id: 1,
    src: "https://cdn.21st.dev/assets/mirror/25/25ee6ad6cc8d34653e9e52a438ed8eb100c3533f59e8eb3a4863a1254d4863f5.jpg",
  },
  {
    id: 2,
    src: "https://cdn.21st.dev/assets/mirror/2e/2e0581aa07c04e8c0db328b221f13bd151e71c87f7e64f4d93046a6cc0e6a4a4.jpg",
  },
  {
    id: 3,
    src: "https://cdn.21st.dev/assets/mirror/3b/3b12f4f0d9160101b532af0a11ce695bb338b9a828f2f1c2e3473c344c7af33e.jpg",
  },
  {
    id: 4,
    src: "https://cdn.21st.dev/assets/mirror/39/39130fc742c7995b212f63fffcafe2177371ce2aadc44e1cc64669d268f48cdd.jpg",
  },
  {
    id: 5,
    src: "https://cdn.21st.dev/assets/mirror/bd/bd93e2bb7edc0ace09495a3ade8690a69562d53a8582a561f179f65fc91c6fd8.jpg",
  },
  {
    id: 6,
    src: "https://cdn.21st.dev/assets/mirror/41/41ebb031313d81fea56184cfde2954b3e4c2921b596e05964f439aeac9e5d617.jpg",
  },
];

const InteractiveImageSelectorDemo = () => {
  const [selected, setSelected] = useState<number[]>([]);
  const [images, setImages] = useState<ImageData[]>(demoImages);
  const [notification, setNotification] = useState<string | null>(null);

  useEffect(() => {
    if (notification) {
      const timer = setTimeout(() => setNotification(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [notification]);

  return (
    <div className="relative flex h-[520px] w-full items-stretch justify-center bg-background p-4">
      {notification && (
        <div className="absolute top-4 right-4 z-50 rounded-lg border bg-background px-4 py-2 text-sm text-foreground shadow-lg">
          {notification}
        </div>
      )}
      <InteractiveImageSelector
        images={images}
        onChange={setSelected}
        onDelete={(deleted) =>
          setImages((imgs) => imgs.filter((img) => !deleted.includes(img.id)))
        }
        onShare={(sharedImages) =>
          setNotification(`Share images: ${sharedImages.join(", ")}`)
        }
        selectable={false}
        selectedImages={selected}
      />
    </div>
  );
};

export default InteractiveImageSelectorDemo;