Exhibition Opening RSVPPRO

ComingSoon72: Exhibition Opening RSVP

A monochrome Auralis art-exhibition section (oversized editorial type, a monospace parenthetical eyebrow) that sets an artwork image beside an eyebrow, an oversized show title, an artist line, a description, a preview-and-dates list, and a working RSVP email form.

Installation

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/comingsoon72?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon72?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon72.tsx.

Quick start

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

import { ComingSoon72, comingsoon72Demo } from "@/components/beste/block/comingsoon72";

export default function Page() {
  return <ComingSoon72 {...comingsoon72Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon72 } from "@/components/beste/block/comingsoon72";

export default function Page() {
  return (
    <ComingSoon72
      badge={{ label: "The exhibition" }}
      heading="Quiet Structures"
      artist="New work by Ivo Marchetti"
      description="A series on stillness, shadow, and the spaces we pass through without noticing."
      meta={[
        { label: "Preview", value: "Oct 12, 7pm" },
        { label: "Runs", value: "Oct 13 to Nov 9" },
        { label: "Gallery", value: "Hall Two, The Foundry" },
      ]}
      image={{ src: "/artwork.jpg", alt: "A minimal artwork on a gallery wall" }}
      labels={{
        placeholder: "you@studio.com",
        success: "You're on the guest list. An invite follows before opening night.",
        note: "Opening night is invite-only. Seats are limited.",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

type ImageItem = {
  src: string;
  alt: string;
};

type MetaItem = {
  label: string;
  value: string;
};

type ComingSoon72Labels = {
  placeholder?: string;
  success?: string;
  note?: string;
};

Behavior notes

• The RSVP form owns its email state; handleSubmit calls preventDefault and only flips to the success capsule when the trimmed email is non-empty, so there is no external callback to wire.
• On submit the pill-shaped form swaps for a bg-muted success capsule with a Check icon, and the note line hides once submitted since it renders only when note is set and the form is not yet submitted.
• The image renders as a plain <img> absolutely positioned to cover its frame; it renders only when image is present.
• The meta list renders only when meta is non-empty, opening under a top border with each row as a label on the left and a value on the right.
• Every region is optional: the image, eyebrow, heading, artist line, description, and meta list each render only when their prop is present.
• No inline markup is parsed: every string renders as plain text, so HTML passed in shows as escaped text.