Lightbox

Open a full-size image by clicking its thumbnail button, with keyboard and backdrop dismissal.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/lightbox.json

Usage

tsx

import { Lightbox } from "@/components/hangry-ui/components/lightbox";

<Lightbox
  src="/gallery/moth.jpg"
  alt="A monochrome moth against a dark background"
  caption="A closer look"
  triggerLabel="View moth"
/>

Press Escape or click outside the image to close it. The close button is keyboard accessible. Background page scrolling is locked while the lightbox is open and restored when it closes. Double-click the image to zoom in, then double-click again to reset. Keyboard users can press Enter or Space while the image is focused.

Props

Prop	Type	Default	Description
`src`	`string`	—	Image shown in the thumbnail button and modal viewer.
`alt`	`string`	—	Alternative text and accessible trigger label.
`caption`	`string`	—	Optional text shown below the enlarged image.
`triggerLabel`	`string`	`"View image"`	Text shown on the button that opens the viewer.
`className`	`string`	`""`	Additional classes on the thumbnail button.

Setup notes

Lightbox uses the native dialog element for focus management and Escape dismissal, plus Motion for a reduced-motion-aware reveal.