Product Gallery
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/lightboxLightbox
A photo grid and fullscreen viewer on Base UI's Dialog. Each photo grows out of its thumbnail and shrinks back into it, cropped as the grid shows it. Swipe or arrow between photos, drag down to dismiss, double-tap, pinch, ctrl-scroll or press + to zoom and drag to pan. A tap hides the controls, a filmstrip follows along, and Escape steps out of a zoom first.
Props
Other props pass through to the root element.
items*
LightboxItem[]
open*
boolean
onOpenChange*
(open: boolean) => void
index*
number
onIndexChange*
(index: number) => void
originOf
(index: number) => HTMLElement | null
The thumbnail element for an item. The photo grows out of it on open and shrinks back into it on close.
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount inside this element instead of
<body>.hideOriginal
boolean
Hide the "Open original" button.
| Description | |||
|---|---|---|---|
| items* | LightboxItem[] | – | |
| open* | boolean | – | |
| onOpenChange* | (open: boolean) => void | – | |
| index* | number | – | |
| onIndexChange* | (index: number) => void | – | |
| originOf | (index: number) => HTMLElement | null | – | The thumbnail element for an item. The photo grows out of it on open and shrinks back into it on close. |
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount inside this element instead of |
| hideOriginal | boolean | – | Hide the "Open original" button. |
