Under Construction ContactPRO

ComingSoon64: Under Construction Contact

A Polaris coming-soon section (single accent color, square eyebrow) that runs a two-column layout: a studio name, an eyebrow, a heading, a description, and an icon contact-details list on the left, paired with a working name, email, and message contact form that swaps to a success state on the right.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon64, comingsoon64Demo } from "@/components/beste/block/comingsoon64";

export default function Page() {
  return <ComingSoon64 {...comingsoon64Demo} />;
}

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

import { ComingSoon64 } from "@/components/beste/block/comingsoon64";

export default function Page() {
  return (
    <ComingSoon64
      brand="Beste Studio"
      label="Site Coming Soon"
      heading="Our new site is on its way. Let's talk in the meantime."
      description="We're a product studio for teams who care about the details."
      contacts={[
        { label: "Email", value: "hello@beste.co" },
        { label: "Phone", value: "+1 (415) 555-0132" },
        { label: "Studio", value: "San Francisco, CA" },
      ]}
      labels={{
        formTitle: "Start a conversation",
        namePlaceholder: "Your name",
        emailPlaceholder: "Your email",
        messagePlaceholder: "What can we help with?",
        submitLabel: "Send message",
        success: "Thanks, we've got it. We'll reply within one business day.",
      }}
    />
  );
}

Props

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

type ComingSoon64Labels = {
  namePlaceholder?: string;
  emailPlaceholder?: string;
  messagePlaceholder?: string;
  submitLabel?: string;
  success?: string;
  formTitle?: string;
};

Behavior notes

• The contact form owns its name, email, and message state; handleSubmit calls preventDefault and only flips to the success panel when both the trimmed name and email are non-empty, so there is no external callback to wire.
• Submitting swaps the whole form for a centered success panel with a Check icon and the success string; there is no way back to the form without a reload.
• The submit control is a full-width <button type="submit"> styled as a solid accent bar, not a seal-style Polaris button.
• Contact rows cycle a fixed [Mail, Phone, MapPin] icon array by index, so the fourth row wraps back to the mail icon.
• Every region is optional: the brand, eyebrow, heading, description, and contact 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.