Photo Book Spread ViewerPRO

Gallery8: Photo Book Spread Viewer

Pictures presented as a photo book: two plates per spread on a soft mount divided by a gutter rule, page arrows on the outer edges, and a progress bar counting the spreads.

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

Base UI flavor

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

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

Quick start

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

import { Gallery8, gallery8Demo } from "@/components/beste/block/gallery8";

export default function Page() {
  return <Gallery8 {...gallery8Demo} />;
}

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

import { Gallery8 } from "@/components/beste/block/gallery8";

export default function Page() {
  return (
    <Gallery8
      badge={{ label: "Turn the page" }}
      heading="The book, opened one spread at a time."
      spreads={[
        {
          left: { src: "/book/01.jpg", alt: "Letterforms at full size", caption: "Letterforms at full size", plate: "Plate 01" },
          right: { src: "/book/02.jpg", alt: "Sheets on a table", caption: "Sheets on the table", plate: "Plate 02" },
        },
        {
          left: { src: "/book/03.jpg", alt: "Pages drying", caption: "Pages, still drying", plate: "Plate 03" },
          right: { src: "/book/04.jpg", alt: "Bound copies", caption: "Bound and trimmed", plate: "Plate 04" },
        },
      ]}
      labels={{
        previousLabel: "Previous spread",
        nextLabel: "Next spread",
        spreadWord: "Spread",
        counterSeparator: "of",
      }}
    />
  );
}

Props

type Spread = {
  left: Plate;
  right: Plate;
};

type Plate = {
  src: string;
  alt: string;
  caption: string;
  plate: string;
};

type Gallery8Labels = {
  previousLabel?: string;
  nextLabel?: string;
  spreadWord?: string;
  counterSeparator?: string;
};

Behavior notes

• The two plates are typed as a pair rather than a list, so a spread always has a left and a right page and the book can never render half open.
• The gutter is a border-l border-current/10 on the right page only, a shade of the mount's own surface, so it reads as a fold rather than a divider between two cards.
• Page arrows sit on the outer edges of the mount and move outside it on desktop (md:-left-6 and md:-right-6), which is what makes them read as page turns rather than controls printed on the page.
• They only render when there is more than one spread, and stepping wraps in both directions.
• The progress bar uses flex-1 segments, so it always spans the mount exactly whatever the number of spreads.
• Every segment is a real button with aria-pressed and an aria-label taken from its left plate, so the bar is navigable rather than decorative.
• Plates are aspect-[3/4] portraits on bg-background inside the mount, which is what gives the impression of paper laid on a table.
• Below md the spread stacks into one column with a gap and no gutter rule, so a phone reads plate after plate instead of squeezing two pages side by side.