Collection intake listed year by year with a summary beside each set of works, opening a viewer that scrolls rather than steps: every acquisition is a snap section and the header counter follows whichever fills the screen.
A collection ledger: each year sets out its intake beside a summary, and the viewer is a scroller rather than a stepper, with every acquisition a snap section and a counter that follows whichever one fills the screen.
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/gallery17?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery17?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/gallery17.tsx plus the badge7 eyebrow it uses.
The installed file exports gallery17Demo alongside the block: the exact props behind the preview above. Spread it to get a working gallery in one line.
import { Gallery17, gallery17Demo } from "@/components/beste/block/gallery17";
export default function Page() {
return <Gallery17 {...gallery17Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gallery17 } from "@/components/beste/block/gallery17";
export default function Page() {
return (
<Gallery17
badge={{ label: "Acquisitions" }}
heading="What the collection took in, year by year."
years={[
{
year: "2023",
summary: "Two purchases and one gift, all from artists shown in the project space.",
works: [
{
src: "/collection/weight.jpg",
alt: "Cast stone and steel work",
title: "Weight, Held",
artist: "Idris Kane",
medium: "Cast stone and steel",
note: "Acquired directly from the studio.",
},
],
},
{
year: "2024",
summary: "A year of paper: four works, none framed until the spring.",
works: [
{
src: "/collection/fold.jpg",
alt: "Folded paper work",
title: "Fold, Unfolded",
artist: "Marta Ekelund",
medium: "Folded cotton paper",
note: "Shown flat for a year before anyone agreed how it should sit.",
},
],
},
]}
labels={{
openLabel: "Open the acquisition",
closeLabel: "Close the record",
scrollHint: "Scroll the viewer to walk the whole intake",
counterSeparator: "of",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
heading | string | – | Section heading above the ledger |
years | AcquisitionYear[] | [] | Years of intake, each with its own works |
labels | Gallery17Labels | {} | Fixed strings that are not content: viewer controls, the scroll hint 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 AcquisitionYear = {
year: string;
summary: string;
works: Work[];
};
type Work = {
src: string;
alt: string;
title: string;
artist: string;
medium: string;
note: string;
};
type Gallery17Labels = {
openLabel?: string;
closeLabel?: string;
scrollHint?: string;
counterSeparator?: string;
};scrollIntoView, and from then on scrolling drives the counter rather than any button.scrollTop / clientHeight rounded and clamped, so it stays correct at any viewport height without measuring each section.snap-start inside a snap-y snap-mandatory scroller and each is h-full, so one acquisition fills the screen at a time.md:grid-cols-[minmax(0,10rem)_1fr] with tabular-nums on the year, so the year column stays straight and narrow.lightbox={false} disables every work button and switches the cursor back to default, leaving a plain ledger.gallery22
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.
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.
gallery13
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.
gallery3
Album gallery with pill filters that swap the whole set below, where any tile opens a light full-screen viewer: the frame hangs on the page surface while a side column carries the caption, the album summary, the controls and a plainly labelled thumbnail index.