Overview Toggle Viewer

Gallery10: Overview Toggle Viewer

A square grid whose viewer holds two states: the single frame, and an overview of the whole set you can jump from without closing anything.

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

Base UI flavor

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

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

Quick start

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

import { Gallery10, gallery10Demo } from "@/components/beste/block/gallery10";

export default function Page() {
  return <Gallery10 {...gallery10Demo} />;
}

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

import { Gallery10 } from "@/components/beste/block/gallery10";

export default function Page() {
  return (
    <Gallery10
      badge={{ label: "The whole set" }}
      heading="Open one frame, or step back and see all of them."
      description="The viewer keeps an overview a single click away."
      frames={[
        { src: "/set/stair.jpg", alt: "Stairwell with one window", caption: "Stairwell, one window", meta: "Rotterdam, April" },
        { src: "/set/facade.jpg", alt: "Facade under a flat sky", caption: "Facade, flat sky", meta: "Rotterdam, April" },
      ]}
      labels={{
        openLabel: "Open this frame",
        closeLabel: "Close the viewer",
        previousLabel: "Previous frame",
        nextLabel: "Next frame",
        overviewLabel: "Show every frame",
        overviewTitle: "All frames",
        counterSeparator: "of",
      }}
    />
  );
}

Props

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

type Gallery10Labels = {
  openLabel?: string;
  closeLabel?: string;
  previousLabel?: string;
  nextLabel?: string;
  overviewLabel?: string;
  overviewTitle?: string;
  counterSeparator?: string;
};

Behavior notes

• The viewer has two states in one panel: the single frame, or the whole set as a scrollable grid, toggled by one control that inverts when the overview is on.
• Escape is layered: it closes the overview first and only closes the viewer on a second press, so stepping back never throws the visitor out of the set.
• Arrow keys are ignored while the overview is open, because stepping through pictures you cannot see would move the selection invisibly.
• Opening a frame from the overview closes the overview in the same action, so one click gets you from the set back to a picture.
• The header line doubles as the state readout: it shows the counter in frame view and the overview title in overview.
• Overview thumbnails fade to opacity-50 when they are not the open frame, marking the position without a border or a colour.
• Setting lightbox={false} disables every grid button and switches the cursor back to default, leaving a plain square wall.
• Viewer tokens are fixed background shades on a bg-foreground/95 surface, correct for a panel that is dark in both themes.