Staaarter

Exhibition Opening RSVP

A two-column exhibition opening announcement: one side shows the featured artwork, the other shows the show title, artist, a preview/dates list, and a working RSVP form with an email success state. Well suited to galleries or studios announcing an upcoming opening.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/exhibition-opening-rsvp.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon72.tsx instead.

Usage

The file also exports comingsoon72Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon72, comingsoon72Demo } from "@/components/blocks/coming-soon/comingsoon72";

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

Props

PropTypeDefaultDescription
eyebrowstring"(exhibition opening)"Monospace label above the show title.
showTitlestringnoneTitle of the exhibition.
artiststringnoneArtist name, shown under the show title.
descriptionstring"Join us for the opening night reception..."Supporting copy under the artist line.
datesExhibitionDate[]nonePreview/dates rows, e.g. opening night, public run, gallery hours.
imageMediaSlotImagenoneArtwork image filling the opposite column.
imagePosition"left" | "right""left"Which side the image sits on, swaps column order via order-first/order-last.
classNamestringnoneExtra classes for the outer section element.

Types

export interface ExhibitionDate {
  label: string;
  value: string;
}

Behavior notes

  • Real interactivity: the RSVP form is a genuine useState-driven email form that swaps to a success message on submit, same pattern as the rest of the category's waitlist forms.
  • The artwork image uses the shared MediaSlot component so it falls back to a placeholder if no image prop is supplied.
  • The dates list is a plain static <dl>, nothing computes or updates the rows.