Staaarter

What Happens Next Waitlist

A centered coming-soon screen with a monospace eyebrow, heading, and a working email waitlist form with a success state, followed by a three-step numbered process explaining exactly what happens after someone signs up.

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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/what-happens-next-waitlist.json

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

Usage

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

export default function Page() {
  return <ComingSoon65 {...comingsoon65Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"(coming soon)"Monospace label above the heading.
headingstring"Sign up, we'll take it from here"Main heading.
descriptionstring"Leave your email and we'll walk you through..."Supporting copy under the heading.
stepsProcessStep[]noneThe three numbered steps rendered below the form.
classNamestringnoneExtra classes for the outer section element.

Types

export interface ProcessStep {
  title: string;
  description: string;
}

Behavior notes

  • The email form is real client state (useState): submitting swaps it for a confirmation message, nothing is sent to a server.
  • The three-step process list is fully static, non-interactive content, safe even if this were a Server Component.