Each work opens on a real wall at its real proportion, so the size stops being an abstraction.
Works listed with the sizes they are printed at, opening a viewer that hangs the piece in a photographed room and scales it as you switch size pills, so the dimensions stop being an abstraction.
A grid of works whose viewer hangs the selected one in a real room and scales it: the pills are sizes, and the picture on the wall grows or shrinks with them so the dimensions stop being an abstraction.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/gallery23?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery23?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/gallery23.tsx plus the badge7 eyebrow it uses.
The installed file exports gallery23Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.
import { Gallery23, gallery23Demo } from "@/components/beste/block/gallery23";
export default function Page() {
return <Gallery23 {...gallery23Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gallery23 } from "@/components/beste/block/gallery23";
export default function Page() {
return (
<Gallery23
badge={{ label: "On your wall" }}
heading="See how big it actually is before it arrives."
description="Each work opens on a real wall at its real proportion."
room={{ src: "/room/empty.jpg", alt: "Empty room lit by a tall window" }}
works={[
{
src: "/prints/alphabet.jpg",
alt: "Letterpress print",
title: "Alphabet for a Quiet Room",
artist: "Hélène Marchal",
medium: "Letterpress on rag paper",
sizes: [
{ label: "Sheet", dimensions: "60 × 42 cm", scale: 18 },
{ label: "Double", dimensions: "120 × 84 cm", scale: 34 },
{ label: "Wall", dimensions: "180 × 126 cm", scale: 52 },
],
},
]}
labels={{
openLabel: "Put this on the wall",
closeLabel: "Take it down",
previousLabel: "Previous work",
nextLabel: "Next work",
sizeTitle: "Size",
roomNote: "Wall shown at three metres wide, standard ceiling.",
counterSeparator: "of",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
heading | string | – | Section heading in the left header column |
description | string | – | Supporting paragraph in the right header column |
works | Work[] | [] | Works in the grid, each with its own size options |
room | RoomImage | – | The room the work is hung in inside the viewer |
labels | Gallery23Labels | {} | Fixed strings that are not content: viewer controls, the size title, the room note and the counter separator |
lightbox | boolean | true | Render the built-in viewer; set false to leave the frames static |
className | string | – | Extra classes for the outer <section> |
type Work = {
src: string;
alt: string;
title: string;
artist: string;
medium: string;
sizes: WallSize[];
};
type WallSize = {
label: string;
dimensions: string;
/** Share of the wall width the work takes, as a percentage */
scale: number;
};
type RoomImage = {
src: string;
alt: string;
};
type Gallery23Labels = {
openLabel?: string;
closeLabel?: string;
previousLabel?: string;
nextLabel?: string;
sizeTitle?: string;
roomNote?: string;
counterSeparator?: string;
};scale is the share of the wall width the work takes, applied as an inline percentage, so the comparison holds at every viewport size without any measuring.Math.min, so a work with fewer sizes than the last selection still renders instead of falling off the end of its array.transition-all duration-500, so switching size reads as the print growing on the wall rather than as a swap.bg-background mount and a soft shadow, which is what makes it read as hung rather than as an image composited onto a photograph.img with an alt behind -z-10, not a CSS background, so it stays meaningful to assistive technology.button elements with aria-pressed, and the selected dimensions are printed in the caption line beside the medium.lightbox={false} disables every work button and switches the cursor back to default, leaving a plain grid of prints.