Restaurant Opening SoonPRO

ComingSoon56: Restaurant Opening Soon

A Polaris hospitality coming-soon section that sets an interior image beside a venue name, a square eyebrow, a heading, a description, an opening-details grid with icons, and a working email list form that swaps to a success state.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon56, comingsoon56Demo } from "@/components/beste/block/comingsoon56";

export default function Page() {
  return <ComingSoon56 {...comingsoon56Demo} />;
}

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

import { ComingSoon56 } from "@/components/beste/block/comingsoon56";

export default function Page() {
  return (
    <ComingSoon56
      brand="Fable & Oak"
      label="Now serving soon"
      heading="A new neighbourhood kitchen is almost ready."
      description="Seasonal plates, a short wine list, and a room built for long dinners. Join the list for a seat on opening week."
      details={[
        { label: "Opening", value: "Late September" },
        { label: "Where", value: "14 Bellwether Lane" },
        { label: "Hours", value: "Tue to Sun, from 6pm" },
      ]}
      image={{ src: "/interior.jpg", alt: "A warm, inviting restaurant interior" }}
      labels={{
        placeholder: "Enter your email",
        success: "You're on the list. We'll save you a table on opening night.",
        note: "Be first to book when reservations open.",
      }}
    />
  );
}

Props

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

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

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

Behavior notes

• The list form owns its email state and swaps to a success panel on submit; handleSubmit calls preventDefault and only flips when the trimmed email is non-empty, so there is no external callback to wire.
• The image renders only when set, as a plain <img> filling a bg-muted frame beside the copy column.
• The details grid renders only when details is non-empty, laying out up to three columns where each row draws its icon from a fixed Clock, MapPin, Clock cycle, so the label text sets the meaning rather than a per-row icon prop.
• The venue name, eyebrow, heading, and description each render only when their prop is present, and the note line renders under the form only while the form has not been submitted.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.