Mosaic Full Screen Viewer

Gallery6: Mosaic Full Screen Viewer

A dense mosaic of ten pictures with mixed spans, each revealing an expand seal on hover, opening into a dark full-screen viewer with arrows on the picture and a scrolling thumbnail strip at the foot.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/gallery6?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/gallery6?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/gallery6.tsx plus the badge7 eyebrow it uses.

Quick start

The installed file exports gallery6Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.

import { Gallery6, gallery6Demo } from "@/components/beste/block/gallery6";

export default function Page() {
  return <Gallery6 {...gallery6Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Gallery6 } from "@/components/beste/block/gallery6";

export default function Page() {
  return (
    <Gallery6
      badge={{ label: "Open any of them" }}
      heading="A dense wall of pictures, one tap from full screen."
      items={[
        {
          src: "/wall/specimen.jpg",
          alt: "Printed editorial spread",
          caption: "Specimen spread, uncut",
          meta: "Rotterdam, March",
        },
        {
          src: "/wall/object.jpg",
          alt: "Minimal object on stone",
          caption: "Object on stone",
          meta: "Studio, February",
        },
      ]}
      labels={{
        openLabel: "Open full screen",
        closeLabel: "Close",
        previousLabel: "Previous picture",
        nextLabel: "Next picture",
        counterSeparator: "of",
      }}
    />
  );
}

Props

type MosaicImage = {
  src: string;
  alt: string;
  caption: string;
  meta: string;
};

type Gallery6Labels = {
  openLabel?: string;
  closeLabel?: string;
  previousLabel?: string;
  nextLabel?: string;
  counterSeparator?: string;
};

Behavior notes

• Spans are assigned by index: the first picture takes a two-by-two block and three later ones take double width, so a set of ten fills the mosaic with no empty cell at either two or four columns.
• Rows are fixed at auto-rows-[9rem] growing to md:auto-rows-[12rem], which is what keeps the wall dense rather than letting tall pictures stretch it.
• The expand seal is hidden until hover or keyboard focus, using a named group (group/gallery6) so it responds to its own tile rather than any ancestor group on the page.
• Setting lightbox={false} disables every tile button and switches the cursor back to default, leaving a plain photographic wall.
• Escape closes the viewer and the left and right arrows step through it, wrapping in both directions.
• In the viewer the arrows sit on the picture itself and the caption, place and thumbnail strip share the bottom row, so the controls never overlap the caption.
• The thumbnail strip scrolls horizontally with overflow-x-auto, so a long set stays one row rather than pushing the picture off the screen.
• Viewer tokens are fixed background shades on a bg-foreground/95 surface, correct for a panel that is dark in both themes.