Simple by default.
Yours when needed.

A small, runtime-dependency-free image viewer with a clean API for adding your own UI.

8.5 kBgzipped, JS + CSS
0runtime dependencies
Native <dialog> lightbox
Keyboard-first & screen-reader ready
Touch swipes, edge taps & arrow keys
Typed render callbacks
CSS-variable theming

Install

Bring the gallery into any React 18.3+ or React 19 project.

bash

npm install react-pic-gallery

See the full quick start ->

Default gallery

tsx

import { PicGallery } from 'react-pic-gallery'
import 'react-pic-gallery/styles.css'

<PicGallery images={images} />

Customize Your Lightbox

Typed render callbacks — renderActions, renderCaption, and renderControls — add actions beside the counter, replace the caption, or own the entire control layer.

Add an action

Add buttons without rebuilding the lightbox.

tsx

<PicGallery
  images={images}
  renderActions={({ image }) => (
    <button type="button" onClick={() => save(image)}>
      Save
    </button>
  )}
/>

Own the controls

Replace the toolbar while keeping the viewer behavior.

tsx

<PicGallery
  images={images}
  renderControls={({ close, next, previous }) => (
    <div>
      <button type="button" onClick={previous}>Back</button>
      <button type="button" onClick={next}>Next</button>
      <button type="button" onClick={close}>Close</button>
    </div>
  )}
/>

EXIF in the lightbox

Extend the image type with your own metadata and render it with renderCaption — the library stays out of the way.

tsx

type ExifImage = GalleryImage & {
  exif?: { camera: string; aperture: string; iso: number }
}

<PicGallery
  images={exifImages}
  renderCaption={({ image }) => <ExifCaption image={image} />}
/>

API reference, theming, and the complete v1 to v2 migration guide.

Read the docs

Simple by default.Yours when needed.