The index gives you the reference. Open one and turn it over to read what the registrar wrote.
Text-first archive index of reference, thumbnail, title and year, opening a record card with two sides: the work on the front and the registrar's acquisition, condition and storage notes on the back.
A text-first archive index of reference, thumbnail, title and year. Opening a record gives a card with two sides: the work on the front, and the registrar's back where the facts are written.
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/gallery22?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery22?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/gallery22.tsx plus the badge7 eyebrow it uses.
The installed file exports gallery22Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.
import { Gallery22, gallery22Demo } from "@/components/beste/block/gallery22";
export default function Page() {
return <Gallery22 {...gallery22Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gallery22 } from "@/components/beste/block/gallery22";
export default function Page() {
return (
<Gallery22
badge={{ label: "Record cards" }}
heading="Every work has a back, and the back is where the facts live."
description="Open one and turn it over to read what the registrar wrote."
entries={[
{
reference: "A-014",
src: "/archive/a-014.jpg",
alt: "Letterpress work",
title: "Alphabet for a Quiet Room",
artist: "Hélène Marchal",
year: "2025",
verso: [
{ title: "Acquired", value: "Commission, 2025" },
{ title: "Condition", value: "Sound, unframed" },
],
note: "Signed on the reverse in pencil, lower left.",
},
]}
labels={{
openLabel: "Pull this record",
closeLabel: "File it back",
previousLabel: "Previous record",
nextLabel: "Next record",
flipLabel: "Turn the work over",
rectoTitle: "Front",
versoTitle: "Back",
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 |
entries | ArchiveEntry[] | [] | Records in the index, in order |
labels | Gallery22Labels | {} | Fixed strings that are not content: viewer controls, the two side titles and the counter separator |
lightbox | boolean | true | Render the built-in viewer; set false to leave the index static |
className | string | – | Extra classes for the outer <section> |
type ArchiveEntry = {
reference: string;
src: string;
alt: string;
title: string;
artist: string;
year: string;
verso: VersoRow[];
note: string;
};
type VersoRow = {
title: string;
value: string;
};
type Gallery22Labels = {
openLabel?: string;
closeLabel?: string;
previousLabel?: string;
nextLabel?: string;
flipLabel?: string;
rectoTitle?: string;
versoTitle?: string;
counterSeparator?: string;
};aria-pressed and inverts when the back is showing, so the side is announced as well as drawn.dl with a fixed minmax(0,7rem) term column and right-aligned values, so a long condition note that wraps still ends on the same edge as the store location.md:grid-cols-[6rem_5rem_1fr_auto] per row with tabular-nums on the reference and the year, so both columns stay straight down the page.border-t only, so the archive reads as a printed list rather than a grid of cards.max-w-3xl mount on a bg-foreground/80 scrim, with the front on a bg-muted surface and the work capped at max-h-[46vh] so it stays something photographed rather than something displayed.lightbox={false} disables every row and switches the cursor back to default, leaving a plain archive index.