Community Launch WaitlistPRO

ComingSoon61: Community Launch Waitlist

An Auralis community coming-soon section on a soft muted card with a monospace parenthetical eyebrow, a heading, a description, a working email waitlist form, a secondary outline community pill button, and an avatar row with a member count.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon61, comingsoon61Demo } from "@/components/beste/block/comingsoon61";

export default function Page() {
  return <ComingSoon61 {...comingsoon61Demo} />;
}

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

import { ComingSoon61 } from "@/components/beste/block/comingsoon61";

export default function Page() {
  return (
    <ComingSoon61
      badge={{ label: "The community" }}
      heading="A quiet corner for people who make things is opening."
      description="No feeds, no noise, just the makers you'd actually want to share a table with. Reserve your seat, or come say hello."
      avatars={[
        { src: "/people/ava.jpg", alt: "Community member" },
        { src: "/people/theo.jpg", alt: "Community member" },
        { src: "/people/priya.jpg", alt: "Community member" },
      ]}
      button={{ label: "Say hello first", href: "/chat" }}
      labels={{
        count: "1,200",
        proof: "founding members already inside",
        placeholder: "you@studio.com",
        success: "You're in. We'll send your invite before the doors open.",
      }}
    />
  );
}

Props

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

type Badge = {
  label: string;
};

type ActionLink = {
  label: string;
  href: string;
};

type ComingSoon61Labels = {
  count?: string;
  proof?: string;
  placeholder?: string;
  success?: string;
};

Behavior notes

• The waitlist 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 button renders as a real link via Button12 asChild wrapping a Next.js <Link href={button.href} /> with the outline tone and a MessageCircle icon, and it is hidden once the form is submitted.
• The whole block is a centered bg-muted card in a max-w-3xl column, and the eyebrow, heading, and description each render only when their prop is present.
• The social proof block renders when avatars, labels.count, or labels.proof is present, showing a -space-x-3 overlapping avatar stack above a line that bolds the count before the proof text.
• Following the Auralis monochrome language, the form is a rounded-full pill with a bg-foreground text-background submit button, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.