# Image lightbox (goodtabs UI)

Thumbnails that open a full image in a dialog with arrow key navigation.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/image-lightbox.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/image-lightbox`

## Usage

```tsx
import { ImageLightbox } from "@/components/ui/image-lightbox"

<ImageLightbox images={[{ src: "/a.jpg", alt: "Dashboard in dark mode" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| images | `{ src: string; alt: string; caption?: string }[]` |  | The images in order. Alt text is required. |

## When to use

- Screenshots or work samples that need a larger look without leaving the page
- Small sets of images where a caption and a position count are enough

## When not to use

- Large galleries that need zoom, pan or thumbnails inside the viewer
- A single decorative image that nobody needs to enlarge

## Notes for agents

- Built on the shadcn Dialog, so focus is trapped, Escape closes and focus returns to the thumbnail
- Left and right arrows move between images and wrap; the buttons do the same for pointer users
- Thumbnails and the full view use plain img tags; swap in next/image in your own project if you prefer
- The dialog title is screen reader only and reads Image 2 of 6, the caption is visible

Docs: https://ui.goodtabs.co/components/image-lightbox