About this block

Lightbox Blueprint renders the open state of a photo viewer as a static layout: a dark scrim at 90% opacity, a large centered image (aspect-4/3) for frame 3 of 24, prev/next chevron buttons flanking the image, a caption reading “Temple gate in autumn fog” with the Kyoto location and date, a close button top-right, and a six-thumbnail strip below with the active frame ringed.

The block uses no Radix portal or Dialog primitive. The scrim and centered card are plain divs, so the layout renders correctly inside the preview iframe without escaping the preview root.

When to use

Reach for this block when a design page or pattern library needs to show what the lightbox looks like open, without wiring up state. The installer replaces the thumbnail count, the caption text, and the frame counter with their own series data.

A natural flow around it on a Portfolio Pro page:

Before

• Photo grid
• Photo masonry

After

• Contact band

What you can display

One strong use is the static design specification for a gallery viewer. Other blueprint uses:

• Portfolio proof of concept. Show a client the finished lightbox state before the interactive build.
• Design system snapshot. Document the open-state pattern alongside the grid that triggers it.
• Presentation slide-in. Drop the blueprint into a page deck as a hi-fi mockup panel.

Tip: the frame counter and thumbnail strip are the details that make a static blueprint read as real; keep both.