Lightbox
NewPro
A thumbnail grid that opens a full-screen viewer: the clicked tile grows into the image, with swipe, arrow keys and Escape.
Customize
4
8px
14px
Loop
#070606
When to use it
- Screenshot galleries on a game or app page
- Photo and art portfolios that need a closer look at each piece
- Product pages with a set of images people want to zoom into
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 632
Installation
Lightbox is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy lightbox.tsx into components/ui and run npm install motion.
Usage
import { Lightbox } from "@/components/ui/lightbox";
<Lightbox
label="Screenshots"
items={shots.map((s) => ({ id: s.id, src: s.url, thumbSrc: s.thumb, alt: s.alt, caption: s.caption }))}
/>Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id?, src?, thumbSrc?, alt?, content?, thumb?, caption?, aspect?, span? }[] | — | Images. Pass src and alt, or content for any markup. aspect is width divided by height in the viewer; images report their own once loaded. span is "wide", "tall" or "big". |
| columns | number | — | A fixed column count. By default the grid fits as many as minThumbWidth allows. |
| minThumbWidth | number | 150 | Smallest tile width in pixels, when columns is not set. |
| rowHeight | number | 150 | Height of a grid row in pixels. |
| gap | number | 8 | Space between tiles in pixels. |
| radius | number | 14 | Corner radius of the tiles in pixels. |
| loop | boolean | true | Wraps from the last image back to the first. |
| onIndexChange | (index: number | null) => void | — | Called with the open image, or null when the viewer closes. |
| backdrop | string | "#070606" | Color behind the open image. |
| backdropOpacity | number | 0.94 | 1 hides the page behind the viewer completely. |
| label | string | "Gallery" | Accessible name of the grid and the viewer. |
| className | string | — | Extra classes for the grid. |
Dependencies: motion