Private Beta Apply

ComingSoon38: Private Beta Apply

A two-column private-beta section built on a single accent color, with a square eyebrow, a heading, a supporting paragraph, and a dark seal apply button on the left, beside a bordered card listing accent-checked tester benefits on the right.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon38, comingsoon38Demo } from "@/components/beste/block/comingsoon38";

export default function Page() {
  return <ComingSoon38 {...comingsoon38Demo} />;
}

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

import { ComingSoon38 } from "@/components/beste/block/comingsoon38";

export default function Page() {
  return (
    <ComingSoon38
      label="Private Beta"
      heading="Help shape it before anyone else gets in."
      description="We're inviting a small group of testers to break things and steer the first release."
      benefits={[
        "Hands-on access weeks before public launch",
        "A private channel straight to the founding team",
        "Free founder plan for a full year after launch",
      ]}
      button={{ label: "Apply For The Beta", href: "/waitlist" }}
      labels={{
        benefitsTitle: "What testers get",
        note: "We read every application and reply within two working days.",
      }}
    />
  );
}

Props

type ComingSoon38Labels = {
  benefitsTitle?: string;
  note?: string;
};

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

Behavior notes

• There is no form or event callback: the button is a real navigation via Button1 asChild wrapping a Next.js <Link href={button.href} /> with the dark tone, so it always points at a URL.
• The layout is a lg:grid-cols-2 split with the eyebrow, heading, description, button, and note in the left column and the benefits card on the right.
• The benefits card renders only when benefits is non-empty, mapping each string to a list row with an accent-colored Check badge and a border-t divider between items (the first row drops its top border and padding).
• The eyebrow, heading, description, button, note, and benefits title each render only when their prop or label is present.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.