ImageGallery

Organism

Responsive image grid with a full-screen lightbox, right-click context menu (open, copy URL, move to first/last, remove), and drag-to-reorder. Supports 2–4 columns, square / video / portrait / auto aspect ratios, optional captions, zoom toggle, thumbnail strip, and full keyboard navigation (← → Escape).

Preview

Drag images to reorder • Right-click for context menu

Code

<ImageGallery
  images={images}
  columns={3}
  aspect="square"
  gap="md"
  reorderable
  onReorder={(next) => setImages(next)}
  onRemove={(idx, img) => console.log('removed', img.alt)}
/>

Preview

Code

<ImageGallery
  images={images}
  columns={3}
  aspect="square"
  gap="md"
  lightbox
/>

Preview

Sunrise over the Alps

Golden hour at the coast

Morning mist in the forest

Downtown at dusk

Code

<ImageGallery
  images={images}
  columns={2}
  aspect="video"
  gap="lg"
  showCaptions
  lightbox
/>

Preview

Code

<ImageGallery
  images={images}
  columns={4}
  aspect="square"
  gap="sm"
  lightbox
/>

ImageGallery

Reorderable — drag + right-click menu

3-column grid — lightbox only

2-column with captions

4-column compact