What Happens Next WaitlistPRO

ComingSoon65: What Happens Next Waitlist

A monochrome Auralis waitlist section (oversized editorial type, a monospace parenthetical eyebrow) that centers a badge, a heading, and a description over a working email notify form, then explains the wait with a three-step numbered process below.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon65, comingsoon65Demo } from "@/components/beste/block/comingsoon65";

export default function Page() {
  return <ComingSoon65 {...comingsoon65Demo} />;
}

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

import { ComingSoon65 } from "@/components/beste/block/comingsoon65";

export default function Page() {
  return (
    <ComingSoon65
      badge={{ label: "How it works" }}
      heading="Join the list, and here's exactly what happens next."
      description="No mystery, no daily emails. Just three simple steps."
      steps={[
        { title: "You join the list", description: "Drop your email and you're locked in for first access." },
        { title: "We build in the open", description: "A short note now and then as things take shape." },
        { title: "You get in first", description: "The day we open, your invite lands before the public link." },
      ]}
      labels={{
        placeholder: "you@studio.com",
        success: "You're on the list. Step one, done.",
        stepsCaption: "After you join",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

type StepItem = {
  title: string;
  description: string;
};

type ComingSoon65Labels = {
  placeholder?: string;
  success?: string;
  stepsCaption?: string;
};

Behavior notes

• The notify form owns its email state; handleSubmit calls preventDefault and only flips to the success pill when the trimmed email is non-empty, so there is no external callback to wire.
• On submit the pill-shaped form swaps for a bordered success capsule with a Check icon and the success string; the input is not restored without a reload.
• The steps section renders only when steps is non-empty, numbering each entry by its index plus one inside a solid bg-foreground circle.
• Both the badge eyebrow and the stepsCaption render through Badge7, so they share the same monospace parenthetical treatment.
• Every region is optional: the eyebrow, heading, description, and steps 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.