Salon Hang Wall

Gallery15: Salon Hang Wall

Works packed tight and label-free the way a salon wall is hung, sizes doing the talking. The viewer is a passe-partout: the work sits in a deep mat and the wide margins themselves step through the hang.

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

Base UI flavor

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

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

Quick start

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

import { Gallery15, gallery15Demo } from "@/components/beste/block/gallery15";

export default function Page() {
  return <Gallery15 {...gallery15Demo} />;
}

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

import { Gallery15 } from "@/components/beste/block/gallery15";

export default function Page() {
  return (
    <Gallery15
      badge={{ label: "Salon hang" }}
      heading="Hung close, floor to ceiling, the way the room was found."
      note="Twelve works from the collection, rehung this spring."
      works={[
        {
          src: "/salon/01.jpg",
          alt: "Letterpress work",
          title: "Alphabet for a Quiet Room",
          artist: "Hélène Marchal",
          medium: "Letterpress on rag paper",
          year: "2025",
          span: "tall",
        },
        {
          src: "/salon/02.jpg",
          alt: "Folded paper work",
          title: "Fold, Unfolded",
          artist: "Marta Ekelund",
          medium: "Folded cotton paper",
          year: "2024",
          span: "medium",
        },
      ]}
      labels={{
        openLabel: "See this work",
        closeLabel: "Back to the wall",
        previousLabel: "Previous work",
        nextLabel: "Next work",
        counterSeparator: "of",
      }}
    />
  );
}

Props

type Work = {
  src: string;
  alt: string;
  title: string;
  artist: string;
  medium: string;
  year: string;
  span?: WorkSpan;
};

type WorkSpan = "small" | "medium" | "large" | "tall";

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

Behavior notes

• span is a union mapped to column and row spans, so the wall is described in the data rather than by writing Tailwind per work; it defaults to small.
• Rows are fixed at auto-rows-[6rem] growing to md:auto-rows-[7rem], which is what keeps a salon hang dense instead of letting one work stretch the wall.
• Nothing on the wall is labelled: titles and credits wait in the viewer, which is exactly how a salon room is hung.
• Each work sits on a bg-background mount with a small inset, reading as a frame without a border.
• In the viewer the wide side margins are themselves the step controls, so the picture is surrounded by mat rather than by buttons; below md they collapse into a pair of round controls under the caption.
• The work is capped at max-h-[52vh] inside a deep bg-muted mat, so it always reads as something mounted rather than as an image filling the screen.
• The viewer is light rather than dark, on bg-background, which suits works on paper better than a black surround.
• Setting lightbox={false} disables every frame button and switches the cursor back to default, leaving the hang as a static wall.