Staaarter

Launch Day Announcement

A centered, editorial-style launch announcement built around an oversized date headline. A short kicker and supporting note frame the date, a Remind Me button sits below, and a three-column ruled list breaks down where, when, and what to expect.

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/launch-day-announcement.json

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

Usage

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

export default function Page() {
  return <ComingSoon25 {...comingsoon25Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the kicker.
kickerstring"Mark your calendar"Short label above the date headline.
dateHeadingstringnoneOversized date headline, e.g. "March 12".
descriptionstring"We're pulling back the curtain..."Supporting copy under the date headline.
reminderHrefstring"#"Link target for the "Remind me" button.
factsLaunchFact[]noneThree-column ruled list of launch facts (label + value).
classNamestringnoneExtra classes for the outer section element.

Types

export interface LaunchFact {
  label: string;
  value: string;
}

Behavior notes

  • Fully static server component: the "Remind me" button is a plain link (`render={<Link href={reminderHref} />}`), not a form submission.
  • The three fact columns are a static, non-interactive ruled list rendered directly from the `facts` prop.