A photo lightbox opened from a mosaic grid, with directional slides, a filmstrip and click to zoom that pans with the pointer. Arrow keys, swipe, Z for zoom and I for details all work.
npx shadcn@latest add https://hyperblur.dev/r/modal-lightbox-zoom.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-lightbox-zoom.tsx.
import { ModalLightboxZoom } from "@/components/hyperblur/modal-lightbox-zoom"
<ModalLightboxZoom images={photos} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| images | { title: string; location: string; meta?: string; background: string; alt?: string }[] | 6 gradient photos | Slides. background accepts any CSS background, including url(...) for real photos. |
| index | number | undefined | Controlled slide index. |
| defaultIndex | number | 0 | Initial slide when uncontrolled. |
| onIndexChange | (index: number) => void | undefined | Called when the slide changes. |
| gallery | boolean | true | Shows the mosaic grid that opens the lightbox at the clicked photo. |
| zoom | number | 2.2 | Zoom factor when a photo is clicked. |
| accent | string | "#ededed" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |