Join the Waitlist

Auth43: Join the Waitlist

A full-height, vertically centered waitlist gate: an optional circular icon badge above a heading and description, a bordered card holding an email Input, a full-width submit Button, and a centered social-proof line, with a separate sign-in prompt linking existing users out below the card.

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

Base UI flavor

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

This installs the block to components/beste/block/auth43.tsx, plus the button, input, and field shadcn/ui primitives it uses for the submit button, the email input, and the field group wrapping the label, description, and layout.

Quick start

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

import { Auth43, auth43Demo } from "@/components/beste/block/auth43";

export default function WaitlistPage() {
  return <Auth43 {...auth43Demo} />;
}

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

import { Sparkles } from "lucide-react";
import { Auth43 } from "@/components/beste/block/auth43";

export default function WaitlistPage() {
  return (
    <Auth43
      icon={<Sparkles className="size-6" />}
      heading="Join the waitlist"
      description="Be the first to know when we open up. No spam, ever."
      labels={{
        email: "Email",
        emailPlaceholder: "you@example.com",
        submit: "Join the waitlist",
        socialProof: "Join 4,200+ people already on the list.",
      }}
      signinPrompt={{ text: "Already have access?", linkLabel: "Sign in", href: "/login" }}
    />
  );
}

Props

type Labels = {
  email?: string;
  emailPlaceholder?: string;
  submit?: string;
  socialProof?: string;
};

type SigninPrompt = {
  text: string;
  linkLabel: string;
  href: string;
};

Behavior notes

• The form has no submit handler beyond onSubmit={(e) => e.preventDefault()}, so the email is never read or sent anywhere; wiring capture (state, validation, a POST) is left entirely to the integrator.
• The Input is uncontrolled with no value, name, required, or onChange, so its typed value is not tracked by the component at all.
• Every text element is conditionally rendered: the icon badge, heading, description, the email FieldLabel, the submit Button, the socialProof line, and the whole signinPrompt block each only appear when their corresponding prop or label is provided.
• labels defaults to {} and is destructured field by field, so omitting individual keys silently hides just that piece rather than throwing.
• The email input's id is derived from React's useId() (`${fieldId}-email`) and paired to the FieldLabel via htmlFor, so the label-input association is unique per instance without any manual id prop.
• The section is min-h-screen and centers its max-w-md column both axes, so the block always fills the viewport height regardless of content length.
• signinPrompt.href is passed straight to a next/link <Link>, so it must be a valid Next.js route or absolute URL; there is no target or rel handling.