App Waitlist Split

ComingSoon59: App Waitlist Split

An Auralis app pre-launch split card that fills one half with a muted panel holding a wordmark, a monospace parenthetical eyebrow, a heading, a description, a working email waitlist form, and platform chips, and the other half with a full-bleed image.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon59, comingsoon59Demo } from "@/components/beste/block/comingsoon59";

export default function Page() {
  return <ComingSoon59 {...comingsoon59Demo} />;
}

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

import { ComingSoon59 } from "@/components/beste/block/comingsoon59";

export default function Page() {
  return (
    <ComingSoon59
      brand="Auralis"
      badge={{ label: "Get the app" }}
      heading="The studio, in your pocket, very soon."
      description="Everything you love about the desktop studio, rebuilt for the days away from your desk. Leave your email for early access."
      platforms={["Coming to iOS", "Coming to Android"]}
      image={{ src: "/phone.jpg", alt: "A person using the app on a phone" }}
      labels={{
        placeholder: "[email protected]",
        success: "You're on the list. We'll send the download link at launch.",
        note: "Reserve your spot and we'll send the app the day it lands.",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

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

type ComingSoon59Labels = {
  placeholder?: string;
  success?: string;
  note?: 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 whole block is a bordered card split into md:grid-cols-2: a bg-muted copy panel on one side and, when image is set, a plain <img> pinned absolutely to cover the other side.
• The wordmark and eyebrow share a header row, with brand on the left and the Badge7 badge.label on the right, each rendering only when its prop is present.
• Following the Auralis monochrome language, the form is a rounded-full pill with a bg-foreground text-background submit button, and the success panel inverts the same way; the note line renders only while the form has not been submitted.
• The platform chips render only when platforms is non-empty, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.