Gallery Exhibition PagePRO

Exhibition1: Gallery Exhibition Page

An exhibition page for a working studio: a navbar running the visiting details as a marquee, a framed poster hero, a salon wall hang with a lightbox, an archive ledger of works by year, a visiting FAQ, a framed closing invitation, and a footer showing whether the room is open right now. Seven blocks, one install.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

npx shadcn add "https://ui.beste.co/page/r/exhibition1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/exhibition1.tsx and everything behind it: the seven blocks it composes (navbar62, hero155, gallery12, gallery17, faq76, cta71, footer118) and the button12 and badge7 components they use. Ten files, no follow-up installs.

Quick start

The installed file exports exhibition1Demo alongside the page: the exact props behind the preview above. Spread it to get a working page in one line.

import { Exhibition1, exhibition1Demo } from "@/components/beste/page/exhibition1";

export default function Page() {
  return <Exhibition1 {...exhibition1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time.

import { Exhibition1, exhibition1Demo } from "@/components/beste/page/exhibition1";

export default function Page() {
  return (
    <Exhibition1
      {...exhibition1Demo}
      navbar={{
        brand: "Room One",
        marquee: [
          "Open Wednesday to Friday, 16:00 to 18:00",
          "Entry is free and needs no booking",
          "Ground floor, step free",
        ],
        cta: { label: "Book a visit", href: "/visit" },
      }}
    />
  );
}

Props

Every prop is the full prop object of the block that renders that section, so anything the block accepts is accepted here.

Sections

Behavior notes

• Every section is conditional on its own prop, so omitting archive removes that section entirely rather than rendering an empty one.
• The navbar is given sticky top-0 z-50 by the page, so the visiting details stay on screen through the whole hang. That is the reason it is sticky here: the marquee is information a visitor needs at the end of the page, not branding.
• The page sets className="bg-muted/50" on the archive after spreading archive, so a className passed inside that prop is overridden. It is the only tint on the page, and it exists to keep two galleries in a row from reading as one.
• There is no dark band on this page. The work supplies the contrast, and inverting a section would compete with the photographs rather than frame them.
• Two gallery blocks sit next to each other on purpose: gallery12 hangs the current show, gallery17 lists the archive. They are different jobs and the tint is what says so.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.
• The page is Pro because blocks inside it are, which is why the licence parameters are on the command above.