Mosaic Full Screen Viewer

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/gallery19.tsx instead.

Usage

The file also exports gallery19Demo, 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 { Gallery19, gallery19Demo } from "@/components/blocks/gallery/gallery19";

export default function Page() {
  return <Gallery19 {...gallery19Demo} />;
}

Props

Types

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

Behavior notes

• The grid itself is caption-free by design; each tile only reveals an `Expand` icon over a darkened overlay on hover/focus (`group-hover`/`group-focus-visible`), the caption only ever appears once the viewer is open.
• Real client-side state: `openIndex` (number | null) opens the viewer for the clicked tile and drives the arrow controls, the counter, and which filmstrip thumbnail is marked `aria-current`.
• The viewer supports ArrowLeft/ArrowRight and Escape via a keydown listener registered in useEffect only while a tile is open, removed on close.
• The counter ('n / total') is computed directly from `openIndex`, not a separately tracked value, so it can never drift out of sync with the image shown.
• The filmstrip at the bottom renders every image as its own clickable thumbnail; clicking one jumps straight to it (not limited to stepping one at a time), and the active thumbnail is full-opacity with a white border while the rest sit at reduced opacity.
• The dark scrim (bg-black/90) and white icon/text chrome in the viewer 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 gallery19.demo.tsx file per this repo's client/demo-file-split rule, not in gallery19.tsx itself.