Thumbnails that grow into a full-screen viewer. Swipe, or use the arrow keys or buttons, to move between.
pnpm dlx shadcn@latest add @latheui/lightboxPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Lightbox is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native ul attributes for the thumbnail list.
| Prop | Type | Default | Description |
|---|---|---|---|
| images* (required) | LightboxImage[] | — | The images, in order. |
| label | string | "Image viewer" | Accessible name of the viewer dialog. |
| layout | "row" | "masonry" | "row" | Thumbnail row or responsive masonry columns. |
| minColumnWidth | number | 150 | Minimum masonry column width in pixels. |
| strip | boolean | true | Show the viewer thumbnail strip. |
| thumbnailClassName | string | — | Classes for each thumbnail. Set the row height here. |
| onOpenChange | (index: number | null) => void | — | Called with the open image's index, and null on close. |
| Prop | Type | Default | Description |
|---|---|---|---|
| src* (required) | string | — | Image URL. Also used as the item key, so it must be unique. |
| alt* (required) | string | — | Describes the image. |
| width* (required) | number | — | Intrinsic width in pixels. |
| height* (required) | number | — | Intrinsic height in pixels. |
| caption | string | — | Shown under the open image. Falls back to alt. |
<Lightbox images={images} thumbnailClassName="h-40 sm:h-48" className="gap-3" />The viewer renders a plain img, so it works in any framework. To serve smaller thumbnails, point src at your image CDN and add srcSet in the component.
<motion.img src={item.src} srcSet={`${item.src}?w=320 320w, ${item.src}?w=640 640w`} sizes="160px" />