Staaarter

Coming Soon Notify Page

A centered coming-soon screen anchored by a plain-text brand wordmark and an accent-highlighted heading. Visitors can join the notify list through a working email form with a success state, and follow along via a row of social icon links below.

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/coming-soon-notify-page.json

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

Usage

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

export default function Page() {
  return <ComingSoon22 {...comingsoon22Demo} />;
}

Props

PropTypeDefaultDescription
brandstring"Acme"Plain-text brand wordmark shown above the eyebrow.
eyebrowstring"Coming soon"Small label above the heading.
headingReactNodenoneMain heading, pass a `<span className="text-primary">` around the key word for the accent highlight.
launchNotestring"We're aiming for a spring launch..."Short supporting note shown under the email form.
socialLinksSocialLink[]noneSocial links rendered as icon-only outline buttons.
classNamestringnoneExtra classes for the outer section element.

Types

export interface SocialLink {
  label: string;
  href: string;
  icon: "twitter" | "github" | "linkedin";
}

Behavior notes

  • The email form is real client state: typing updates a controlled input, and submitting swaps the form for a success message (useState only, nothing is sent over the network).
  • Social links are real external anchors (`render={<a href={...} target="_blank" rel="noreferrer" />}`) with an `aria-label` per icon-only button, not decorative.
  • The icon shown per social link is resolved from a fixed lookup map keyed by the link's `icon` string, never passed around as a component reference.