2023
Two purchases and one gift, all from artists shown in the project space.
2024
A year of paper: four works, none of them framed until the spring.
2025
The letterpress commission arrives, and the store room loses a wall.
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.