Staaarter

Private Beta Apply

A two-column pre-launch screen: one side carries the pitch, an eyebrow, heading, supporting paragraph, and an apply button, while the other side holds a bordered card listing what beta testers get, each item checked off with an icon.

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/private-beta-apply.json

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

Usage

The file also exports comingsoon38Demo, 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 { ComingSoon38, comingsoon38Demo } from "@/components/blocks/coming-soon/comingsoon38";

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

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Apply for private beta"Main heading.
descriptionstring"We're onboarding a small group of teams..."Supporting copy under the heading.
applyLabelstring"Apply for access"Label for the apply button.
benefitsHeadingstring"What beta testers get"Heading above the benefits card.
benefitsstring[]noneList of checked benefit bullets shown in the benefits card.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static Server Component, no client state anywhere.
  • The "Apply for access" button is decorative with no onClick handler, it's a placeholder call-to-action rather than a working form.