Lightbox galleryPro
A masonry grid where photos zoom from their slot into a viewer you can swipe, pinch, and drag away.
Live · keyboard ready
Lisbon and the coast
- Photo collections people browse and inspect up close, such as trips, portfolios, or listings.
- Mixed portrait and landscape sets that should keep their aspect ratios in a masonry grid.
- Use photo-grid for a square grid with pinch zoom between densities.
- Use carousel for a single inline row without a viewer.
- Use dialog to show one arbitrary piece of content.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { LightboxGallery } from "@/registry/components/lightbox-gallery/lightbox-gallery"; const photos = [ { src: "/trip/harbor.jpg", width: 1600, height: 1067, alt: "Boats in a harbor at dawn", title: "Harbor", caption: "May 2026" }, { src: "/trip/alley.jpg", width: 1067, height: 1600, alt: "Narrow alley with lanterns", title: "Old town" }, { src: "/trip/cliffs.jpg", width: 1600, height: 1200, alt: "Cliffs over the sea" },]; export function TripPhotos() { return <LightboxGallery images={photos} label="Trip photos" minColumnWidth={180} />;}LightboxGallery
A masonry grid of photos that open in a fullscreen viewer. The tapped photo zooms out of its grid slot and flies back to the slot of whichever photo is showing when the viewer closes.
PropTypeDefaultDescription
imagesRequired{ src: string; width: number; height: number; alt: string; title?: string; caption?: string }[]–Photos in reading order. width and height are the intrinsic size, which sets the aspect ratio in the grid, zoom, and return flight. title and caption are the two caption lines.minColumnWidthnumber150Columns are added while each stays at least this wide, in px. There are always at least two.gapnumber8Gap between photos in px.labelstring"Photo gallery"Accessible name of the gallery and its viewer.classNamestring–Class on the root region.- EnterorSpace
- Open the focused photo in the viewer.
- Arrow LeftorArrow Right
- Previous or next photo in the viewer.
- +or-or0
- Zoom in, zoom out, or reset zoom.
- Escape
- Close the viewer; focus returns to the matching grid photo.
- Tab
- Cycles within the viewer's controls while it is open.
- The grid is a labelled region of buttons named like "Open Harbor, photo 1 of 3"; the viewer is a portalled role="dialog" with aria-modal and a focus trap, and focus starts on Close.
- Only the current slide is exposed to assistive tech, and a polite live counter reads "2 of 12" as photos change.
- Zoom is an aria-pressed toggle, previous and next are disabled at the ends, and the thumbnail strip marks the current photo with aria-current.
- Opening flies the photo from its grid slot to fit the stage on a spring with a constant corner radius; closing flies it back to the current photo's slot while the backdrop fades.
- Drag down to dismiss with resistance, swipe between photos with momentum, and pinch, Ctrl+scroll, or double click to zoom around the pointer.
- Reduced motion skips the flight and swiping springs, fades the viewer in and out, and jumps zoom and slides into place.
- Columns are computed from the gallery's own width and minColumnWidth, with at least two.
- Below 640px viewport width the side arrows hide and swipe navigates; pinch, drag to dismiss, and double tap zoom work on touch.
- Grid images use next/image with responsive sizes; viewer slides load lazily except the current one.
- The grid is not virtualized, so paginate very large collections.
- Remote image hosts must be allowed in next.config for next/image.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a photo collection people browse and inspect up close, such as trips, portfolios, or listings. Use photo-grid for a grid without a fullscreen viewer, carousel for a single inline row with no zoom, and dialog to show one arbitrary piece of content.
- Always pass real width, height, and alt for every image so the masonry and flights keep aspect ratios; it uses next/image, so remote hosts must be allowed in next.config.
The full library index for assistants is at /llms.txt.