# Lightbox

> Modal lightbox viewer with gestures, keyboard navigation, EXIF, and video playback.

Source: https://gallerykit.n.yatsyk.com/docs/lightbox

# @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

```bash
pnpm add @gallerykit/lightbox
```

## Quick example

```tsx
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](./getting-started.mdx) for the full walkthrough and [API](./api.mdx) for the public exports.