14 March to 2 June, Room One
Works of different sizes hung on one centre line inside a matted wall panel, each with its own label, opening a viewer that shows the piece in a mount beside a museum wall label of medium, dimensions and year.
Works hung on one centre line the way they would be in a room: mounted frames of different sizes and ratios, aligned through their middles, opening into a viewer with a proper wall label beside the picture.
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/gallery12?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery12?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/gallery12.tsx plus the badge7 eyebrow it uses.
The installed file exports gallery12Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.
import { Gallery12, gallery12Demo } from "@/components/beste/block/gallery12";
export default function Page() {
return <Gallery12 {...gallery12Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gallery12 } from "@/components/beste/block/gallery12";
export default function Page() {
return (
<Gallery12
badge={{ label: "Now hanging" }}
heading="Eight works, one wall, hung on a single line."
dates="14 March to 2 June, Room One"
works={[
{
src: "/works/fold.jpg",
alt: "Folded paper work",
title: "Fold, Unfolded",
artist: "Marta Ekelund",
medium: "Folded cotton paper",
dimensions: "48 × 62 cm",
year: "2024",
size: "medium",
ratio: "portrait",
},
{
src: "/works/weight.jpg",
alt: "Cast stone and steel work",
title: "Weight, Held",
artist: "Idris Kane",
medium: "Cast stone and steel",
dimensions: "31 × 31 cm",
year: "2023",
size: "small",
ratio: "square",
},
]}
labels={{
openLabel: "See this work",
closeLabel: "Leave the work",
previousLabel: "Previous work",
nextLabel: "Next work",
wallTitle: "Wall label",
mediumTitle: "Medium",
dimensionsTitle: "Dimensions",
yearTitle: "Year",
counterSeparator: "of",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
heading | string | – | Section heading in the header row |
dates | string | – | Run of the show, set opposite the heading |
works | Work[] | [] | Works on the wall, in hanging order |
labels | Gallery12Labels | {} | Fixed strings that are not content: viewer controls and the wall label's field titles |
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;
dimensions: string;
year: string;
size?: WorkSize;
ratio?: WorkRatio;
};
type WorkSize = "small" | "medium" | "large";
type WorkRatio = "portrait" | "square" | "landscape";
type Gallery12Labels = {
openLabel?: string;
closeLabel?: string;
previousLabel?: string;
nextLabel?: string;
wallTitle?: string;
mediumTitle?: string;
dimensionsTitle?: string;
yearTitle?: string;
counterSeparator?: string;
};size and ratio are unions mapped to class strings, so a wall of mixed formats is described in the data rather than by writing Tailwind per work; both default to a medium portrait.flex-wrap items-center, so frames of different heights align through their middles exactly as they would on a real wall, not along a shared top or bottom edge.bg-background mount with padding, which is what reads as a frame without drawing a border.minmax(0,7rem) term column with the value right-aligned, so a medium that wraps onto a second line still ends on the same edge as the dimensions and the year.max-h-[60vh], so the work never fills the panel edge to edge and still reads as something hung.bg-background with the picture on a bg-muted wall, which suits works on paper better than a black surround.lightbox={false} disables every frame button and switches the cursor back to default, leaving the hang as a static wall.gallery23
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.
gallery15
Label-free salon wall where works of four different spans pack tightly into a matted panel, opening a passe-partout viewer whose full-height side margins are themselves the previous and next controls.
gallery14
Long-scroll exhibition where every work sits in its own matted panel with a full label, beside a sticky rail whose numbered index follows the work in the middle of the screen and scrolls to any other on click.
gallery18
Matted edition cards opening a viewer that keeps the whole sheet and its detail crops in one place: pill controls swap what the large frame shows while the side column holds process, sheet size and edition.