Staaarter

Waitlist Coming Soon

A centered coming-soon screen with an eyebrow, heading, and supporting copy, followed by a rounded photo tile with the email waitlist form overlaid at the bottom on a dark gradient. A monospace social-proof note sits below the tile once the visitor scrolls past the form.

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

npx shadcn add https://staaarter.com/r/waitlist-coming-soon.json

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

Usage

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

export default function Page() {
  return <ComingSoon15 {...comingsoon15Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
headingstring"A better way to work is almost here"Main heading.
descriptionstring"We're putting the finishing touches..."Supporting copy under the heading.
imageMediaSlotImageundefinedPhoto filling the tile behind the form.
socialProofNotestring"(Join 2,400+ others waiting)"Monospace note under the tile.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The email field and submit are real client state (useState): submitting swaps the form for a confirmation message, nothing is sent to a server.
  • The photo tile uses MediaSlot with a dark gradient overlay so the white form text stays legible regardless of the underlying image.
  • No email format or duplicate-signup validation beyond the native `required`/`type="email"` input constraints.