Coming Soon Notify Page

ComingSoon22: Coming Soon Notify Page

A centered coming-soon launch page from the Polaris set that leads with a single accent color, stacking a brand wordmark, a square eyebrow, an accent-highlighted heading, a supporting paragraph, a working email notify form with its success state, a launch note, and a row of social links.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon22, comingsoon22Demo } from "@/components/beste/block/comingsoon22";

export default function Page() {
  return <ComingSoon22 {...comingsoon22Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this. The icon on each social entry is a lucide-react component, not a string:

import { Github, Twitter } from "lucide-react";
import { ComingSoon22 } from "@/components/beste/block/comingsoon22";

export default function Page() {
  return (
    <ComingSoon22
      brand="Polaris"
      label="Coming Soon"
      heading="Something better is on the way. <strong>Be first through the door.</strong>"
      description="Leave your email and we'll let you know the minute it opens."
      socials={[
        { label: "Twitter", href: "/twitter", icon: Twitter },
        { label: "GitHub", href: "/github", icon: Github },
      ]}
      labels={{
        placeholder: "Enter your email",
        success: "You're on the list. We'll email you the moment we go live.",
        note: "Launching autumn 2026. No spam, unsubscribe anytime.",
        socialsCaption: "Follow along",
      }}
    />
  );
}

Props

import type { LucideIcon } from "lucide-react";

type SocialLink = {
  label: string;
  href: string;
  icon: LucideIcon;
};

type ComingSoon22Labels = {
  placeholder?: string;
  success?: string;
  note?: string;
  socialsCaption?: string;
};

Behavior notes

• The notify form owns its own 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 heading is rendered through dangerouslySetInnerHTML, so an inline <strong> is honored and styled in text-primary; every other string is plain text with no markup parsing.
• The rounded form is a single bordered pill with a transparent <input> and a square accent submit button carrying an ArrowRight icon; the note line renders only before submit.
• Each social entry renders its icon component inside a bordered Next.js <Link href={social.href} /> with the label as its aria-label, and the whole row renders only when socials is non-empty.
• The page is a full-height centered flex column; the brand, eyebrow, heading, description, form, note, and socials each render only when their prop or label is present.