Lightbox Frame Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/gallery/gallery23.tsx instead.

Usage

The file also exports gallery23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Gallery23, gallery23Demo } from "@/components/blocks/gallery/gallery23";

export default function Page() {
  return <Gallery23 {...gallery23Demo} />;
}

Props

Types

interface FramePhoto {
  caption: string;
  image?: { src: string; alt: string };
}

Behavior notes

• Unlike this category's other viewers, the grid itself keeps its captions visible under every tile rather than hiding them until the lightbox opens - this is the deliberately plain, classic baseline lightbox variant.
• Real client-side state: `openIndex` (number | null) opens the lightbox for the clicked tile and drives the frame counter and prev/next controls.
• The lightbox supports ArrowLeft/ArrowRight and Escape via a keydown listener registered in useEffect only while a frame is open, removed on close.
• The frame counter ('Frame n of total') sits above the picture and is computed directly from `openIndex`, so it can never drift out of sync with the image shown; the caption and its prev/next controls sit together in one row below the picture.
• The dark scrim (bg-black/90) and white icon/text chrome in the lightbox are the deliberate dark-viewer-surface exception to the semantic-tokens rule used across this gallery category's other full-screen viewers.
• "use client" component, so its demo props live in the sibling gallery23.demo.tsx file per this repo's client/demo-file-split rule, not in gallery23.tsx itself.