@gallerykit/lightbox

@gallerykit/lightbox is the full-screen image viewer used by the rest of GalleryKit. It supports pinch-zoom and pan gestures, keyboard navigation, an EXIF panel, custom action buttons, and inline video playback.

The useLightbox hook gives you imperative open/close control; the <Lightbox> component handles the rendering.

• Stability: experimental
• Peer dependencies: react, react-dom, framer-motion
• Dependencies: @gallerykit/core

Install

pnpm add @gallerykit/lightbox

Quick example

import { Lightbox, useLightbox } from "@gallerykit/lightbox";

export function ItemRow({ items }: { items: GalleryItem[] }) {
  const lb = useLightbox(items);
  return (
    <>
      {items.map((item, i) => (
        <button key={item.id} onClick={() => lb.open(i)}>
          <img src={item.src} alt={item.alt} />
        </button>
      ))}
      <Lightbox {...lb} />
    </>
  );
}

See Getting Started for the full walkthrough and API for the public exports.