Staaarter

Invite Code Access

A centered coming-soon card on a soft muted surface, built for a private-beta gate. Visitors can redeem an invite code through a working form with a success state, or fall back to a decorative "Join the waitlist instead" pill link if they don't have one.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/invite-code-access.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon34.tsx instead.

Usage

The file also exports comingsoon34Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon34, comingsoon34Demo } from "@/components/blocks/coming-soon/comingsoon34";

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

Props

PropTypeDefaultDescription
eyebrowstring"(coming soon)"Monospace label above the heading.
headingstring"Private beta access"Main heading.
descriptionstring"We're rolling out access in small batches..."Supporting copy under the heading.
waitlistLabelstring"Join the waitlist instead"Label for the decorative fallback link.
waitlistHrefstring"#"Link target for the fallback waitlist link.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The invite-code form is real client state: submitting any non-empty code sets a `submitted` flag and swaps in a confirmation message, there's no real validation against a code list.
  • The "Join the waitlist instead" pill is a plain decorative link (`render={<Link href={waitlistHref} />}`) with a placeholder href, nothing is submitted.