Masonry Caption Gallery

Gallery1: Masonry Caption Gallery

A masonry wall of photographs, each captioned on its own line, with a viewer that slides in from the right as a drawer rather than covering the page. The wall stays visible behind it, so you keep your place.

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

Base UI flavor

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

This installs the block to components/beste/block/gallery1.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Gallery1, gallery1Demo } from "@/components/beste/block/gallery1";

export default function Page() {
  return <Gallery1 {...gallery1Demo} />;
}

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

import { Gallery1 } from "@/components/beste/block/gallery1";

export default function Page() {
  return (
    <Gallery1
      badge={{ label: "Picture desk" }}
      heading="Everything we photographed this season."
      description="Shot on set, on press and on the shop floor."
      items={[
        {
          src: "/season/specimens.jpg",
          alt: "Printed letterforms as a type specimen",
          caption: "Specimen sheets, first proof",
          meta: "Rotterdam, March",
        },
        {
          src: "/season/facade.jpg",
          alt: "Concrete and timber studio facade",
          caption: "The building, before we moved in",
          meta: "Rotterdam",
        },
      ]}
      button={{ label: "Open the full archive", href: "/archive" }}
      labels={{
        openLabel: "Open this frame",
        closeLabel: "Close the drawer",
        previousLabel: "Previous frame",
        nextLabel: "Next frame",
        counterSeparator: "of",
      }}
    />
  );
}

Props

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

type ActionButton = {
  label: string;
  href: string;
};

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

Behavior notes

• The viewer is a drawer, not an overlay: it slides in from the right over a bg-foreground/50 scrim, so the wall behind stays visible and the reader keeps their position in it.
• The slide is started inside a requestAnimationFrame after mount, which is what gives the transform a starting point to animate from instead of appearing already open.
• Setting lightbox={false} disables every frame button and switches the cursor back to default, leaving a plain captioned wall with no viewer attached.
• Escape closes and the left and right arrows step through, with the index wrapping in both directions, so the end of the wall runs back to the start.
• The wall is a CSS columns masonry with break-inside-avoid on each figure, so pictures of any height pack without a layout library.
• Captions live under the picture on one flex-wrap items-baseline line, so a long caption and its place stay on the same baseline and wrap cleanly rather than colliding.
• The last figure's bottom margin is removed with [&>figure:last-child]:mb-0, so the closing rule above the CTA does not collide with the final caption.
• Inside the drawer the picture is object-contain in a min-h-0 flex-1 box, so the whole frame is visible whatever its shape and the caption row stays pinned to the bottom.