Nobody knows what they mean by warm or timeless. Pick the frames you would hang and we will tell you what you have been choosing.
A gallery finder whose questions are photographs rather than sentences: three rows of frames are chosen by eye, and the result names the leading way of looking, shows the series that goes with it, and breaks the picks down as a share bar.
A gallery finder whose questions are photographs rather than sentences. Three rows of frames are chosen by eye, and the result names the leading way of looking, shows the series that goes with it, and breaks the picks down as a share bar.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/gallery25"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/gallery25"That installs the block file, the badge7 eyebrow and button12 pill it is built from, and the questionnaire primitive.
import { Gallery25, gallery25Demo } from "@/components/beste/block/gallery25";
export default function Page() {
return <Gallery25 {...gallery25Demo} />;
}import { Gallery25 } from "@/components/beste/block/gallery25";
export default function Page() {
return (
<Gallery25
badge={{ label: "What do you actually like" }}
heading="Choose pictures, not adjectives."
description="Pick the frames you would hang and we will tell you what you have been choosing."
questions={[
{
name: "one",
title: "Which of these would you hang?",
choices: [
{
value: "a",
label: "Empty foreground, long light",
// which style this frame counts towards
style: "quiet",
image: {
src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
alt: "Frame from the quiet selection",
},
},
{
value: "b",
label: "Somebody caught mid-sentence",
style: "documentary",
image: {
src: "https://images.unsplash.com/photo-1519741497674-611481863552",
alt: "Frame from the documentary selection",
},
},
],
},
]}
styles={[
{
key: "quiet",
title: "The quiet eye",
description: "You keep choosing frames where very little is happening.",
strip: [
{
src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
alt: "Print from the quiet series",
},
],
button: { label: "See the quiet series", href: "https://beste.co" },
},
{
key: "documentary",
title: "The documentary eye",
description: "You pick the frames with somebody in them.",
button: { label: "See the documentary series", href: "https://beste.co" },
},
]}
labels={{ submit: "Read my picks", leadLabel: "of your picks" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Parenthetical eyebrow above the heading, rendered with Badge7. |
heading | string | – | Section heading. |
description | string | – | Lead paragraph, set opposite the heading. |
questions | PhotoQuestion[] | [] | Rows of frames, in the order they are shown. One pick each. |
styles | Style[] | [] | Counted from the frames that were picked; the largest share leads. |
labels | Gallery25Labels | {} | Overrides for the navigation buttons and the result copy. |
className | string | – | Merged onto the section element. |
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type Frame = { src: string; alt: string };
type PhotoQuestion = {
name: string;
title: string;
description?: string;
choices?: PhotoChoice[];
};
type PhotoChoice = {
value: string;
label: string;
image: Frame;
style: string;
};
type Style = {
key: string;
title: string;
description: string;
strip?: Frame[];
button?: ActionButton;
};
type Gallery25Labels = {
previous?: string;
next?: string;
submit?: string;
restart?: string;
leadLabel?: string;
breakdownTitle?: string;
};bg-muted card with the caption underneath, and the card carries no border, so the mount around the picture is the only frame in play.strip. Those sit in the same soft mounts as the choices, so the answer is presented the way the question was asked.style on a frame refers to a Style.key. A frame pointing at a key that does not exist is simply never counted, so keep the two in step.gallery9
Justified rows of frames that grow to fill every line, opening a viewer whose picture doubles as the zoom control: clicking switches between fitting the screen and filling it, with the caption and controls on one closing rule.
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.
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.
gallery29
An even three-column grid of photographic plates that open into an ink lightbox: every frame keeps the same ratio so the captions line up, arrows and keys turn the page, either half of the plate is clickable, and a plate that belongs to a page offers it as a link.