Lightbox

Overlay

A zoomable image viewer opened from a thumbnail.

Click a thumbnail to open a full-size image with zoom controls. Built on the Shelf Dialog component.

npx shadcn@latest add lightbox

Image lightbox

A thumbnail trigger with a zoomable modal.

Preview

Live

tsx

1<Lightbox>
2  <LightboxTrigger src={thumb} alt="Mountain landscape" />
3  <LightboxContent
4    src={full}
5    alt="Mountain landscape at full size"
6    caption="Alpine ridge at golden hour"
7  />
8</Lightbox>

Zoom controls

Zoom in, zoom out, and reset via the toolbar or the keyboard.

Preview

Live

tsx

1<Lightbox>
2  <LightboxTrigger src={thumb} alt="..." />
3  <LightboxContent src={full} alt="..." />
4</Lightbox>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
src	string	Image URL. Required on trigger and content.
alt	string	Alternative text for the image.
caption	string	Optional caption shown in the toolbar.
open	boolean= false	Controlled open state (inherited from Dialog).
onOpenChange	(open) => void	Called when the lightbox opens or closes.