Full Bleed Strip With Sheet Viewer

Gallery11: Full Bleed Strip With Sheet Viewer

A strip of portrait tiles running edge to edge with a one-pixel gap, opening into a viewer where the details live in a sheet that slides down out of the way so the picture can be seen whole.

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

Base UI flavor

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

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

Quick start

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

import { Gallery11, gallery11Demo } from "@/components/beste/block/gallery11";

export default function Page() {
  return <Gallery11 {...gallery11Demo} />;
}

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

import { Gallery11 } from "@/components/beste/block/gallery11";

export default function Page() {
  return (
    <Gallery11
      badge={{ label: "Edge to edge" }}
      heading="A strip that runs off both sides of the page."
      frames={[
        {
          src: "/strip/fitting.jpg",
          alt: "Garments in soft light",
          caption: "Second fitting",
          meta: "Antwerp, January",
          detail: "Shot at four in the afternoon with the blinds half down.",
        },
        {
          src: "/strip/seam.jpg",
          alt: "Mark pressed into a seam",
          caption: "Mark pressed into the seam",
          meta: "Antwerp, January",
          detail: "The only place the logo appears on the finished piece.",
        },
      ]}
      labels={{
        openLabel: "Open this frame",
        closeLabel: "Close the viewer",
        previousLabel: "Previous frame",
        nextLabel: "Next frame",
        expandLabel: "Show the details",
        collapseLabel: "Hide the details",
        counterSeparator: "of",
      }}
    />
  );
}

Props

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

type Gallery11Labels = {
  openLabel?: string;
  closeLabel?: string;
  previousLabel?: string;
  nextLabel?: string;
  expandLabel?: string;
  collapseLabel?: string;
  counterSeparator?: string;
};

Behavior notes

• The strip sits outside the page container, so the tiles bleed to both edges; a gap-1 and no radius keep them reading as one continuous band rather than a row of cards.
• The sheet slides down to translate-y-[calc(100%-4.5rem)] rather than disappearing, so its handle row stays on screen and the picture can be seen whole without leaving the viewer.
• The sheet reopens every time a frame is opened from the strip, so the details are always the first thing a new visitor sees.
• Its toggle carries aria-expanded and swaps its own label between the expand and collapse strings, so the state is announced rather than only drawn.
• The picture is object-contain across the whole viewport on a solid bg-foreground, so a tall frame is never cropped by the sheet.
• Step controls sit top left and close sits top right, keeping all three away from the sheet at the bottom.
• Thumbnails inside the sheet fade to opacity-40 when they are not the open frame, marking position without a border.
• Setting lightbox={false} disables every tile button and switches the cursor back to default, leaving the strip as a static band.