Interest Selector Waitlist

ComingSoon30: Interest Selector Waitlist

A monochrome, editorial full-bleed image waitlist section with a dark overlay and light text, centering a parenthetical eyebrow, a heading, a supporting line, a set of toggleable interest chips, and a working rounded email-capture form that swaps to a success state.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon30, comingsoon30Demo } from "@/components/beste/block/comingsoon30";

export default function Page() {
  return <ComingSoon30 {...comingsoon30Demo} />;
}

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

import { ComingSoon30 } from "@/components/beste/block/comingsoon30";

export default function Page() {
  return (
    <ComingSoon30
      badge={{ label: "Tell us who you are" }}
      heading="Join the list, and we'll only send what fits your work."
      description="A few taps now means every note lands close to what you actually do."
      interests={["Brand & identity", "Product design", "Motion", "Writing"]}
      image={{ src: "/studio.jpg", alt: "A calm, light-filled studio workspace" }}
      labels={{
        interestsCaption: "Pick what you're here for",
        placeholder: "you@studio.com",
        success: "You're in. We'll shape your first email around what you chose.",
        privacy: "We only use this to send you the right updates. Nothing else.",
      }}
    />
  );
}

Props

type ComingSoon30Labels = {
  interestsCaption?: string;
  placeholder?: string;
  success?: string;
  privacy?: string;
};

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

Behavior notes

• The email form owns its input state and swaps the whole chips-and-form region 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 interest chips are local toggle buttons tracked by index in component state with aria-pressed; selecting them restyles the chip but has no effect on submission and is not sent anywhere.
• The image renders as a plain <img> absolutely positioned behind a fixed bg-foreground/75 overlay, and the eyebrow, heading, and description sit in light text over it.
• Every region is optional: the eyebrow, heading, description, chips, and privacy note each render only when their prop or label is present.
• The chips row, form, and privacy note are all hidden once the form is submitted, leaving only the centered success panel.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.