An animated image gallery grid with a toggle selection mode for selecting, sharing, and deleting multiple photos.
"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;
Part of SmoothUI — browse the full library on 21st.dev.