Every edition opens with its own detail crops, so the paper and the ink are visible before anything is framed.
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.
Prints presented as editions: mounted sheets in a row, opening into a viewer that keeps the whole sheet and its detail crops in one place, swapped by a strip of pills beside the edition record.
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/gallery18?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery18?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/gallery18.tsx plus the badge7 eyebrow it uses.
The installed file exports gallery18Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.
import { Gallery18, gallery18Demo } from "@/components/beste/block/gallery18";
export default function Page() {
return <Gallery18 {...gallery18Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gallery18 } from "@/components/beste/block/gallery18";
export default function Page() {
return (
<Gallery18
badge={{ label: "Editions" }}
heading="Prints you can hold up to the light before deciding."
description="Every edition opens with its own detail crops."
editions={[
{
src: "/editions/alphabet.jpg",
alt: "Letterpress sheet",
title: "Alphabet for a Quiet Room",
artist: "Hélène Marchal",
process: "Letterpress, two passes",
size: "120 × 84 cm",
edition: "Twelve, plus two proofs",
crops: [
{ src: "/editions/alphabet-crop-1.jpg", alt: "Impression depth", label: "Impression depth" },
{ src: "/editions/alphabet-crop-2.jpg", alt: "Paper grain", label: "Paper grain" },
],
},
]}
labels={{
openLabel: "Inspect this edition",
closeLabel: "Close the edition",
previousLabel: "Previous edition",
nextLabel: "Next edition",
fullWorkLabel: "Whole sheet",
cropsTitle: "Look closer",
processTitle: "Process",
sizeTitle: "Sheet",
editionTitle: "Edition",
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 |
editions | Edition[] | [] | Editions, in order |
labels | Gallery18Labels | {} | Fixed strings that are not content: viewer controls, the record's field titles and the crop strip labels |
lightbox | boolean | true | Render the built-in viewer; set false to leave the frames static |
className | string | – | Extra classes for the outer <section> |
type Edition = {
src: string;
alt: string;
title: string;
artist: string;
process: string;
size: string;
edition: string;
crops: Crop[];
};
type Crop = {
src: string;
alt: string;
label: string;
};
type Gallery18Labels = {
openLabel?: string;
closeLabel?: string;
previousLabel?: string;
nextLabel?: string;
fullWorkLabel?: string;
cropsTitle?: string;
processTitle?: string;
sizeTitle?: string;
editionTitle?: string;
counterSeparator?: string;
};-1 means the whole sheet, so the big frame and the pill strip share one piece of state rather than two that can disagree.minmax(0,6rem) term column with right-aligned values, so a long process description that wraps still ends on the same edge as the sheet size and the edition.button elements with aria-pressed, and the whole-sheet pill is one of them, so the set reads as a single choice.object-contain on a bg-muted wall, so a landscape crop and a portrait sheet both sit correctly without cropping.md the record column moves under the picture and gains a top border instead of a left one, keeping the viewer usable on a phone.lightbox={false} disables every edition button and switches the cursor back to default, leaving a plain row of mounted sheets.