# Lightbox A React component in [Beamline](https://beamline.io/)'s [Content & display](https://beamline.io/components/display) category. Live demo: https://beamline.io/components/lightbox 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](https://beamline.io/components/image-compare)). - Images that are the page's content, laid out at size (use img or [aspect-ratio](https://beamline.io/components/aspect-ratio)). - Any non-image content in an overlay ([dialog](https://beamline.io/components/dialog) or [sheet](https://beamline.io/components/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 ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Content & display - [Advertisement](https://beamline.io/components/advertisement): A sponsor or promo slot that turns through its ads on a hairline that fills; hovering or focusing holds the current ad. - [Avatar](https://beamline.io/components/avatar): A person or account in a small space: a photo, or initials on the hue their name always gets; presence dot; circle for people, square for companies. - [Avatar group](https://beamline.io/components/avatar-group): A team in a small space: overlapping faces that name themselves on hover or focus, and “+N” naming the rest. - [Badge](https://beamline.io/components/badge): A short status, category or count label: six tones, an icon or a status dot, two sizes. - [Code block](https://beamline.io/components/code-block): Code to read and copy: highlighted in the system's colours, numbered, marked lines, long files folded behind “Show all”. - [Comment thread](https://beamline.io/components/comment-thread): A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread. - [File diff](https://beamline.io/components/file-diff): A change to one file as a unified diff: line numbers, tinted lines, only the changed words marked, long unchanged stretches folded; give rows or just… - [Image compare](https://beamline.io/components/image-compare): Two images in one frame with a divider: drag anywhere, or arrow keys on the handle; horizontal or vertical, with captions. - [Item](https://beamline.io/components/item): The generic list row: media, title, description, meta and trailing actions; becomes a link or button when interactive. - [Kbd](https://beamline.io/components/kbd): Keyboard keys as keycaps; `mod` resolves to ⌘ or Ctrl per platform, symbols are spoken as words. - [Logo Carousel](https://beamline.io/components/logo-carousel): A wall of logos shown a few at a time: every few seconds the slots turn left to right, each logo leaving upward as the next rises in. - [Marker](https://beamline.io/components/marker): A labelled point in a stream: a status event with an icon between messages, or a label such as "Today" between two hairlines. - [QR Code](https://beamline.io/components/qr-code): A scannable code set as gradient dots with rounded finder rings and an optional centre mark; a new value ripples out from the centre. - [Slot text](https://beamline.io/components/slot-text): Text and numbers that roll into their new value on reels, digit by digit from the right; other characters fade. Read as plain text by assistive tech. - [Text morph](https://beamline.io/components/text-morph): A short label that becomes its next state letter by letter: shared letters glide into place, new ones arrive, old ones leave. - [Text reveal](https://beamline.io/components/text-reveal): A headline whose words rise into place once, the first time it scrolls into view; never repeats. - [Text shimmer](https://beamline.io/components/text-shimmer): Ongoing work said in words (“Thinking…”) with a calm band of light passing across them; stops when inactive. - [Timeline](https://beamline.io/components/timeline): What happened, newest first and grouped by day: people with avatars, systems with toned icons, relative times with the exact time on hover, details in… - [Video player](https://beamline.io/components/video): A video player on the native