Lightbox

Component preview

A modal viewer that enlarges one media item and may let the user move through a related collection.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: image viewer, media viewer, photo overlay

open this photo bigger over the page
view gallery images without leaving
a full overlay for one product image
click a thumbnail to inspect the picture
previous and next photos in a popup
zoom an image with a caption and close button

Try it

Modal surfaces

Compare all three behaviors

Shared comparison scenario: A project item opens a focused overlay while the underlying workspace remains unavailable until the user finishes or closes it.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Your task

Open the second image, move to the next one with the keyboard, then close and return to the same thumbnail.

Edge case to verify

A failed image load preserves the caption and navigation, reports the failure in text, and never leaves an empty modal.

Bright cliffs by the sea — Parts of the specimen
Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.
Backdrop
The layer that separates a modal surface from inactive page content.

Quiet path through a dense forest — Parts of the specimen
Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.
Backdrop
The layer that separates a modal surface from inactive page content.

Use it when

Inspecting product photography at a larger size
Moving through a small related image collection

Avoid it when

The media must be compared side by side
The content is a form or consequential decision

Compare similar concepts

Use a Modal dialog for a general contained task; use Alert dialog for a short consequential decision and Lightbox when viewing media is the task.

Modal dialog

An Alert dialog is for a short consequential decision, not a general form and not a media viewer.

Alert dialog

Technical details

Behaviors

Contain focus
While modal, keyboard focus stays inside the surface until it closes.
Navigate media
Previous and next controls move through the collection without leaving the viewer.
Dismiss with Escape
Escape closes the temporary surface and returns focus to a sensible control.

States

Gallery view
Gallery view
Media expanded
Media expanded

State transitions

Gallery view → Media expanded
A thumbnail is activated and its media opens with caption and navigation context.
Media expanded → Gallery view
Close or Escape dismisses the lightbox and restores focus to the originating thumbnail.

Test scenarios

Context: A product gallery contains four detailed photographs with meaningful alternative text and captions.
Mission: Open the second image, move to the next one with the keyboard, then close and return to the same thumbnail.
Primary state: The selected photograph is enlarged with its caption, position in the set, and navigation controls.
Edge case: A failed image load preserves the caption and navigation, reports the failure in text, and never leaves an empty modal.

Accessibility

Role: dialog with aria-modal=true containing figure content
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Opening moves focus to the viewer or close control, contains it, and closing returns it to the originating thumbnail.
Dismissal: The named close control and Escape always dismiss; outside press is optional and never the only path.
Scroll: Background scrolling is locked while the modal is open. Overflow scrolls inside the surface and the focused control remains visible.
Announcement: The viewer title, current item position, caption, image alternative text, and loading failures are available to assistive technology.
Keyboard: Tab reaches viewer controls
Left and Right move between media when documented
Escape closes the viewer

Bindings

Dialog.Root
implementationKind
shadcn-radix
nativeElement
Not applicable
ariaPattern
dialog with figure viewer
radixPrimitive
Dialog
shadcnRecipe
Dialog with figure viewer
runtimeDependency
@radix-ui/react-dialog@1.1.19
packageName
@radix-ui/react-dialog
exportName
Dialog.Root
exactVersion
1.1.19
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Dialog supplies modal containment only; media navigation, captioning, loading, zoom, and gesture behavior are an explicit composition.
Verify binding source

Sources

WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Lightbox: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.
Radix Primitives: Dialog
Radix Primitives · documentation · 2026-07-16
Claim covered: Lightbox: documented Radix Dialog parts, modal focus management, portals, overlay, and dismissal hooks.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.

Turn this concept into a useful prompt

What people describe

Modal surfaces

Parts of the specimen

Use it when

Avoid it when

Compare similar concepts

Behaviors

States

State transitions

Test scenarios

Accessibility

Bindings

Sources

Turn this concept into a useful prompt

What people describe

Modal surfaces

Parts of the specimen

Use it when

Avoid it when

Compare similar concepts

Behaviors

States

State transitions

Test scenarios

Accessibility

Bindings

Sources