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

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	Default
images?	ImageData[]	-
selectedImages?	number[]	-
onChange?	(selected: number[]) => void	-
onDelete?	(deleted: number[]) => void	-
onShare?	(selected: number[]) => void	-
className?	string	-
title?	string	-
selectable?	boolean	-

Fluid Morph

Component that morphs a fluid shape into another fluid shape

App Download Stack

Inspired by Family.co and the example by Jenson Wong, this component presents a stack of apps, allowing users to open the stack, select the apps they want, and download them.