Lightbox Blueprint
Static open state lightbox with a centered image, prev and next controls, a caption strip, and a five thumbnail filmstrip.
Static open state lightbox with a centered image, prev and next controls, a caption strip, and a five thumbnail filmstrip.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Lightbox Blueprint renders its open state as static markup over a bg-foreground/20 scrim: a centered bg-background card containing a top bar with the filename (brand-campaign.jpg), the position label 4 of 9 with the date Jun 12, 2026, and info, download, and close icon buttons. The main area floats the Placeholder image in a 3:2 aspect container between left and right chevron buttons. A caption strip below reads Hero shot for the brand refresh campaign followed by a metadata line: 2400 x 1600 px, JPEG, 2.4 MB, Uploaded by Avery Stone. At the bottom a five-thumbnail filmstrip uses a ring-2 highlight on the active thumb and +4 more to indicate the rest of the set.
The filmstrip is one array with an active flag steering the ring style. No Radix portal is used; the scrim and card are plain divs so the block renders correctly in every preview iframe.
Reach for this block as the full-screen viewer that opens when a user clicks an asset in the media grid, wiring the prev/next buttons to your gallery index and the filmstrip thumbnails to jump navigation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the media gallery lightbox viewer. Other configurations:
Tip: always show position within the set (4 of 9) in the top bar; without it users cannot tell whether next will loop them back or end the gallery.