Invite Code Access

ComingSoon34: Invite Code Access

A monochrome, editorial invite-only pre-launch card on a soft muted surface with a parenthetical eyebrow, a heading, a supporting line, a working invite-code redemption form that swaps to a success state, and a border-topped fallback waitlist pill button.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon34, comingsoon34Demo } from "@/components/beste/block/comingsoon34";

export default function Page() {
  return <ComingSoon34 {...comingsoon34Demo} />;
}

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

import { ComingSoon34 } from "@/components/beste/block/comingsoon34";

export default function Page() {
  return (
    <ComingSoon34
      badge={{ label: "Invite only" }}
      heading="The first doors open by invitation."
      description="Enter the code a member shared with you, or add your name for one later."
      button={{ label: "Join the waitlist", href: "/waitlist" }}
      labels={{
        codeCaption: "Have an invite code?",
        codePlaceholder: "AURALIS-XXXX",
        success: "Code accepted. Your studio is unlocking now.",
        orLabel: "No code yet?",
      }}
    />
  );
}

Props

type ComingSoon34Labels = {
  codeCaption?: string;
  codePlaceholder?: string;
  success?: string;
  orLabel?: string;
};

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

Behavior notes

• The invite-code form owns its input state and swaps to a success panel on submit; handleSubmit calls preventDefault and only flips when the trimmed code is non-empty, so any non-empty value is accepted and there is no external validation.
• The code input uppercases what you type via uppercase tracking-wider, while the placeholder keeps its normal case, so entered codes read as AURALIS-XXXX regardless of the casing you press.
• The fallback button renders via Button12 asChild wrapping a Next.js <Link href={button.href} /> with the outline tone in a border-t footer, and both it and its orLabel caption are hidden once a code is redeemed.
• The eyebrow, heading, description, caption, and fallback button 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.