Sign The Wall Waitlist

ComingSoon73: Sign The Wall Waitlist

A monochrome Auralis interactive waitlist section (oversized editorial type, a monospace parenthetical eyebrow) that centers a badge, a heading, and a description over a name and email form, then shows a live wall of member name chips that prepends your own entry on submit.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon73, comingsoon73Demo } from "@/components/beste/block/comingsoon73";

export default function Page() {
  return <ComingSoon73 {...comingsoon73Demo} />;
}

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

import { ComingSoon73 } from "@/components/beste/block/comingsoon73";

export default function Page() {
  return (
    <ComingSoon73
      badge={{ label: "Leave your mark" }}
      heading="Add your name to the ones we're building this for."
      description="This isn't just a launch, it's a room filling up. Sign the wall."
      entries={["Mara Ellison", "Theo Marchetti", "Priya Nadar", "James Wilson"]}
      labels={{
        namePlaceholder: "Your name",
        emailPlaceholder: "you@studio.com",
        submitLabel: "Add my name",
        wallCaption: "Everyone already on the wall",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

type ComingSoon73Labels = {
  namePlaceholder?: string;
  emailPlaceholder?: string;
  submitLabel?: string;
  wallCaption?: string;
};

Behavior notes

• The wall is seeded from entries into useState on first render, mapping each name to a chip; the prop is read once, so later entries changes do not update the wall.
• The sign form owns its name and email state; handleSubmit calls preventDefault and only acts when both trimmed values are non-empty, prepending { name, mine: true } to the wall and clearing both inputs.
• Your own chip is marked mine and rendered inverted on a solid bg-foreground surface so it stands out from the muted seed chips at the front of the wall.
• The submit control is a labeled <button type="submit"> that reads submitLabel, not an icon seal.
• Each chip shows an avatar built from the name's initials via a local initials helper that takes the first letter of up to the first two words, uppercased.
• Every region is optional: the eyebrow, heading, description, and wall each render only when their prop or the seeded wall is present.