Lightbox

A React component in Beamline's Content & display category.

A full-screen image viewer: a thumbnail grows into it and shrinks back, arrows and ←/→ step through the set, Esc or a downward drag closes it.

Use it for

Opening image attachments or generated images at full size from their thumbnails.
Stepping through a small set of images (screenshots, variations).

Not for

Comparing two versions of one image (image-compare).
Images that are the page's content, laid out at size (use img or aspect-ratio).
Any non-image content in an overlay (dialog or sheet).

Anatomy

thumbnail (button; a media frame with the look's edge only)
backdrop (dimmed, blurred)
counter (LTR figure, isolated)
close
image (corner follows the look's card radius)
previous / next (overlay the image edge on phones)
caption

States

closed
open
dragging to dismiss
single image (no counter or arrows)

Keyboard

Enter / Space on a thumbnail opens the viewer
← / → step through the set (mirrored in right-to-left pages)
Esc closes and returns focus to the current thumbnail, surviving opener, or its owning data-return-region/scope when the opener was removed.
Tab cycles close, previous, next inside the viewer

Motion

The image moves from the thumbnail rect to the viewer on the scoped smooth spring and back on close; backdrop and chrome timing follow the scope. Reduced/none: no travel or drag; content is shown immediately.

Props

Prop	Type	Default	Description
`classNames`	`typed part classes`	—	See visualContract.slots; existing handlers, accessibility and internal measurement refs are preserved.
`style`	`CSSProperties`	—	Visual root inline styles.
`ref`	`HTMLDivElement (viewer), HTMLButtonElement (LightboxThumb)`	—	Native visual root/control reference, composed with internal refs when present.

Dependencies

@radix-ui/react-dialog, motion, lucide-react

Import

import { Lightbox, LightboxThumb } from "@/components/lightbox/lightbox";

Get it

Lightbox is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent