## Lightbox Gallery (S—168)

A thumbnail grid that opens a lightbox growing from the tapped tile; swipe or use arrows, Escape returns to the grid.

- URL: https://sundaeui.dev/components/lightbox-gallery
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/lightbox-gallery.json`
- Tags: swipe, modal, lightbox, gallery, images, media

The lightbox animates out of the exact thumbnail you tapped and back into it on close, so people keep their place. Inside, swipe, arrow keys or the side buttons move between items, with a counter.
Works with images or any content per slide; the demo uses monochrome placeholder tiles.

### Usage

```tsx
import { LightboxGallery } from '@/components/sundae/lightbox-gallery'

<LightboxGallery />
```

### Props

- `items` (`{ id: string; label: string; content?: ReactNode }[]`, required): Slides.
- `columns` (`number`, default `3`): Grid columns.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product photos, portfolios, attachments.

### When not to use

- A single image: open it inline.

### Accessibility

- The lightbox is a modal dialog: focus moves in, is trapped, and returns to the thumbnail on close.
- Arrow keys navigate; the counter is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next
- Esc: Close