Plate Grid Lightbox

Gallery29: Plate Grid Lightbox

An even three-column grid of photographic plates that open into an ink lightbox.

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/gallery29?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/gallery29.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports gallery29Demo alongside the block: the exact props behind the preview above. Spread it to get a working plate Grid Lightbox in one line.

import { Gallery29, gallery29Demo } from "@/components/beste/block/gallery29";

export default function Page() {
  return <Gallery29 {...gallery29Demo} />;
}

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

import { Gallery29 } from "@/components/beste/block/gallery29";

export default function Page() {
  return (
    <Gallery29
      eyebrow="Where we are"
      heading="Six places, six plates."
      button={ label: "How to find us", href: "/visit", tone: "outline" }
      labels={ open: "Open", close: "Close", previous: "Previous plate", next: "Next plate", plate: "Plate", of: "of" }
      plates={[
        {
          title: "Rua da Prata",
          caption: "The main rooms, second floor",
          href: "/rooms",
          linkLabel: "About this room",
          image: { src: "/places/prata.jpg", alt: "A tiled stairwell" },
        },
      ]}
    />
  );
}

Props

type Plate = {
  title: string;
  caption?: string;
  href?: string;
  linkLabel?: string;
  image: Image;
};

type Labels = {
  open?: string;
  close?: string;
  previous?: string;
  next?: string;
  plate?: string;
  of?: string;
};

type Image = { src: string; alt: string };

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Every frame is aspect-[4/3], so the grid stays even and the titles under the plates share one baseline across a row.
• Each plate in the grid is a button with cursor-zoom-in, so opening the lightbox is the only thing a click in the grid can do.
• href is optional: a plate that belongs to a page offers it as a link inside the lightbox footer, so the grid keeps a single hit target while the page stays reachable.
• The lightbox mounts conditionally inside AnimatePresence, which is correct for a dialog; the always-mounted rule in this set applies to navigation panels, not modals.
• Escape closes and the arrow keys turn the page while the lightbox is open, and body scroll is locked for as long as it is.
• Either half of the plate is a button with cursor-w-resize and cursor-e-resize, so the pointer names the direction before the click.
• The plate slides in the direction of travel through a custom prop on AnimatePresence, so going back reads differently from going forward.
• Grid plates drift -8% to 8% against a 1.18 scale and clear from blur(24px) on decode; the lightbox image is object-contain and does not drift.