KQ-522 · LIGHT/BOX

Light Box

A gallery whose thumbnail grows into the viewer. Tile and viewer share a layoutId, so opening morphs the thumbnail's rect into the picture on glide while the backdrop tweens in, and closing returns it to the tile it grew from. Moving is a different gesture: the old picture leaves on the exit ease and the new arrives from distances.shift, driven by arrows, a swipe, or the Left and Right keys, with focus trapped and Escape closing.

KQ-522 · LIGHT/BOX

Four plates · pick one to open

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/light-box

Props

images: LightBoxImage[]; default —; Items of { id, alt, caption?, art }; art renders in both the tile and the viewer, so make it fill its container.
open / defaultOpen: string | null; default null; Controlled or initial id of the open picture; null is closed.
onOpenChange: (id: string | null) => void; default —; Fires on open, on every move, and on close.
className: string; default —; Applied to the gallery wrapper.

Prop	Type	Default	Description
images	LightBoxImage[]	—	Items of { id, alt, caption?, art }; art renders in both the tile and the viewer, so make it fill its container.
open / defaultOpen	string \| null	null	Controlled or initial id of the open picture; null is closed.
onOpenChange	(id: string \| null) => void	—	Fires on open, on every move, and on close.
className	string	—	Applied to the gallery wrapper.