Lightbox

ProNew

A thumbnail grid that opens a full-screen viewer, zooming out of the thumbnail, with arrow keys, swipe, captions and a thumbnail strip.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/lightbox

Pass a smaller thumbnail for each image so the grid loads fast; the viewer loads src only when it opens.

Prop	Type	Default	Description
`images`	`LightboxImage[]`	-	Images with `src`, `alt`, optional `thumbnail` and `caption`.
`index`	`number \| null`	-	Open image when controlled; `null` closes the viewer.
`onIndexChange`	`(index: number \| null) => void`	-	Called when the viewer opens, pages or closes.
`loop`	`boolean`	`true`	Wrap around at the ends.
`showThumbnails`	`boolean`	`true`	Show the thumbnail strip in the viewer.
`gridClassName`	`string`	-	Classes for the thumbnail grid, for example column counts.
`className`	`string`	-	Classes for the root.

Also accepts all div props.

Thumbnails are buttons named by their alt text, with aria-haspopup="dialog".
The viewer is a shadcn/ui Dialog (Radix): focus is trapped, Escape closes and focus returns to the thumbnail. The dialog is named by the current image's alt and describes its position and the arrow key shortcut.
Left and Right arrow keys page; Previous, Next and Close are labelled buttons; the counter is a polite live region; strip thumbnails are named "Show image 3: …" and the current one has aria-current.
On touch screens, swipe left or right to page.
The opened image zooms out of its thumbnail and pages slide. With reduced motion images cross-fade and nothing zooms.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/lightbox

Pass a smaller thumbnail for each image so the grid loads fast; the viewer loads src only when it opens.

Prop	Type	Default	Description
`images`	`LightboxImage[]`	-	Images with `src`, `alt`, optional `thumbnail` and `caption`.
`index`	`number \| null`	-	Open image when controlled; `null` closes the viewer.
`onIndexChange`	`(index: number \| null) => void`	-	Called when the viewer opens, pages or closes.
`loop`	`boolean`	`true`	Wrap around at the ends.
`showThumbnails`	`boolean`	`true`	Show the thumbnail strip in the viewer.
`gridClassName`	`string`	-	Classes for the thumbnail grid, for example column counts.
`className`	`string`	-	Classes for the root.

Also accepts all div props.

Thumbnails are buttons named by their alt text, with aria-haspopup="dialog".
The viewer is a shadcn/ui Dialog (Radix): focus is trapped, Escape closes and focus returns to the thumbnail. The dialog is named by the current image's alt and describes its position and the arrow key shortcut.
Left and Right arrow keys page; Previous, Next and Close are labelled buttons; the counter is a polite live region; strip thumbnails are named "Show image 3: …" and the current one has aria-current.
On touch screens, swipe left or right to page.
The opened image zooms out of its thumbnail and pages slide. With reduced motion images cross-fade and nothing zooms.