ComponentsInteractive Image Selector
Interactive Image Selector
Select images by clicking on them, delete selected images using the trash icon, and reset the gallery with the refresh button. Inspired by the smooth and intuitive photo gallery experience of iPhones, this interface features seamless animations for an engaging user experience.
Demo Gallery
Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/interactive-image-selector.json"Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/interactive-image-selector-demo.json"How to use
Demo.tsx
"use client"
import React, { useState } from "react"
import InteractiveImageSelector, {
ImageData,
} from "@/components/smoothui/ui/InteractiveImageSelector"
const demoImages: ImageData[] = [
{
id: 1,
src: "https://images.unsplash.com/photo-1605478185737-99ae313e940c?=jpg&fit=crop&w=300&q=80&fit=max",
},
{
id: 2,
src: "https://images.unsplash.com/photo-1564951434112-64d74cc2a2d7?=jpg&fit=crop&w=300&q=80&fit=max",
},
{
id: 3,
src: "https://images.unsplash.com/photo-1612317248613-c1236be97f6f?=jpg&fit=crop&w=300&q=80&fit=max",
},
{
id: 4,
src: "https://images.unsplash.com/photo-1603118675111-239b194fb8d8?=jpg&fit=crop&w=300&q=80&fit=max",
},
{
id: 5,
src: "https://images.unsplash.com/photo-1605478185737-99ae313e940c?=jpg&fit=crop&w=300&q=80&fit=max",
},
{
id: 6,
src: "https://images.unsplash.com/photo-1564951434112-64d74cc2a2d7?=jpg&fit=crop&w=300&q=80&fit=max",
},
]
const InteractiveImageSelectorDemo = () => {
const [selected, setSelected] = useState<number[]>([])
const [images, setImages] = useState<ImageData[]>(demoImages)
return (
<InteractiveImageSelector
images={images}
selectedImages={selected}
onChange={setSelected}
onDelete={(deleted) =>
setImages((imgs) => imgs.filter((img) => !deleted.includes(img.id)))
}
onShare={(selected) => alert(`Share images: ${selected.join(", ")}`)}
title="Demo Gallery"
selectable={false}
/>
)
}
export default InteractiveImageSelectorDemo
Props
| Prop | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| images? | ImageData[] | Array of images to display in the gallery. Object shape:
| |||||||||
| selectedImages? | number[] | Controlled selected image IDs. | |||||||||
| onChange? | (selected: number[]) => void | Callback fired when the selected images change. | |||||||||
| onDelete? | (deleted: number[]) => void | Callback fired when images are deleted. | |||||||||
| onShare? | (selected: number[]) => void | Callback fired when the share button is clicked. | |||||||||
| className? | string | Optional additional class names for the root container. | |||||||||
| title? | string | Gallery title. | |||||||||
| selectable? | boolean | Whether selection is enabled by default. |