LightboxPro
Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
When to use
- Galleries, portfolios, product photos and attachments.
When not to use
- One image: link to it or use the image lens.
Installation
Usage
Import it from @/components/ui/lightbox after installing.
example.tsx
import { Lightbox } from "@/components/ui/lightbox";
<Lightbox images={photos.map((p) => ({ id: p.id, src: p.url, alt: p.alt, caption: p.caption }))} />API reference
Lightbox
A thumbnail grid that opens a full-screen modal viewer.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | { id; src?; render?; alt; caption? }[] | – | URLs, or render for custom content. |
| columns | 2 | 3 | 4 | 3 | Grid columns (2 on phones). |
Keyboard interactions
| Keys | Action |
|---|---|
| Enter | Open a thumbnail |
| ←or→ | Previous or next |
| Esc | Close and return to the thumbnail |
Accessibility
- A modal dialog labelled with the image and its position; the caption is announced.
- Focus returns to the thumbnail you opened.
Motion
- The thumbnail grows into the viewer; paging slides; swipe on touch.
Responsive behavior
- Arrows hide on phones in favor of swiping.
Performance
- Only the current image is mounted in the viewer.
Notes for AI
- Give every image a meaningful alt.
This page as Markdown, for assistants and coding agents:
/components/lightbox/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt