Image Gallery

image-gallery

Installation


pnpm dlx shadcn@latest add https://ui.sanjid.shop/r/image-gallery.json

Props

Prop	Type	Required	Default	Description
Gallery.Root	images: string[]title?: stringchildren: React.ReactNode	Yes	–	Provider that manages state and renders the modal viewer.
Gallery.Grid	—	No	–	Responsive grid of image tiles. Click to open the viewer.
Gallery.Viewer	stripRef: React.RefObject<HTMLDivElement \| null>	No	–	Fullscreen viewer (normally mounted by Root).
Gallery.ThumbnailStrip	stripRef: React.RefObject<HTMLDivElement \| null>	No	–	Scrollable thumbnail bar used inside the viewer.
Gallery.NavButton	dir: 'left' \| 'right'; onClick: () => void	No	–	Navigation button component for custom layouts.

Usage

1"use client";2
3import { Gallery } from "@/components/ui/image-gallery";4
5const IMAGES = [6  "/images/shot-1.jpg",7  "/images/shot-2.jpg",8  "/images/shot-3.jpg",9  "/images/shot-4.jpg",10  "/images/shot-5.jpg",11];12
13export default function Page() {14  return (15    <section className="container py-12">16      <h1 className="mb-6 text-2xl font-semibold">Image Gallery</h1>17      <GalleryRoot images={IMAGES} title="Gallery Demo">18        <GalleryGrid />19        {/* The Viewer is automatically rendered by Root when an image is selected */}20      </GalleryRoot>21    </section>22  );23}

Features

Smooth, spring-based transitions with Framer Motion
Fullscreen lightbox with keyboard navigation (ArrowLeft / ArrowRight to navigate, Esc to close)
Scrollable thumbnail strip with snap behavior
Next.js Image optimization
Dark/Light friendly UI

Accessibility

The viewer is rendered as a role="dialog" with aria-modal="true".
Keyboard controls:
Esc — close
ArrowLeft / ArrowRight — previous / next image

Image Gallery

Installation

Props

Usage

Features

Accessibility

Build your next big idea with us