Printed-catalogue layout pairing a numbered index of works with a sticky matted plate and its note, where an expand seal opens the plate alone on a dark ground with only its number and the arrows.
A printed catalogue on a page: a numbered index on one side, the selected plate mounted and captioned on the other, and a viewer that shows the plate alone with nothing but its number and a way out.
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/gallery13?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery13?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/gallery13.tsx plus the badge7 eyebrow it uses.
The installed file exports gallery13Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.
import { Gallery13, gallery13Demo } from "@/components/beste/block/gallery13";
export default function Page() {
return <Gallery13 {...gallery13Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gallery13 } from "@/components/beste/block/gallery13";
export default function Page() {
return (
<Gallery13
badge={{ label: "Catalogue" }}
heading="Every work in the show, numbered as it was hung."
entries={[
{
number: "01",
src: "/catalogue/01.jpg",
alt: "Letterpress work on rag paper",
title: "Alphabet for a Quiet Room",
artist: "Hélène Marchal",
year: "2025",
medium: "Letterpress on rag paper",
note: "Printed in a single pass on a proofing press the artist rebuilt herself.",
},
{
number: "02",
src: "/catalogue/02.jpg",
alt: "Folded paper work",
title: "Fold, Unfolded",
artist: "Marta Ekelund",
year: "2024",
medium: "Folded cotton paper",
note: "One sheet, forty-one folds, no adhesive anywhere in the piece.",
},
]}
labels={{
indexTitle: "The list",
expandLabel: "See the plate full size",
closeLabel: "Close the plate",
previousLabel: "Previous plate",
nextLabel: "Next plate",
noteTitle: "Catalogue note",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
heading | string | – | Section heading above the two columns |
entries | CatalogueEntry[] | [] | Catalogue entries, first one selected on mount |
labels | Gallery13Labels | {} | Fixed strings that are not content: the index title, the note title and the viewer controls |
lightbox | boolean | true | Render the built-in viewer; set false to leave the plate static |
className | string | – | Extra classes for the outer <section> |
type CatalogueEntry = {
number: string;
src: string;
alt: string;
title: string;
artist: string;
year: string;
medium: string;
note: string;
};
type Gallery13Labels = {
indexTitle?: string;
expandLabel?: string;
closeLabel?: string;
previousLabel?: string;
nextLabel?: string;
noteTitle?: string;
};grid-cols-[3rem_1fr_auto] per row with tabular-nums on the number and the year, so both columns stay straight however long the titles are.border-border to border-foreground and the title gains contrast, so it never depends on colour alone.md:sticky md:top-24 md:self-start, so it stays in view while a long index scrolls; self-start is the part that matters, because a stretched grid item cannot stick.lightbox={false} removes the expand control entirely, leaving a catalogue whose plate is only ever shown at page size.gallery16
Exhibition split into artist rooms, each with a sticky statement column beside its works, opening a viewer that shows the chosen piece large with the next one waiting as a thumbnail you can step straight into.
gallery8
Photographs presented as printed spreads on a soft panel: two plates share a page with a centre rule, round controls turn to the next spread, and a bar index below tracks how far through the book you are.
gallery12
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.
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.