Staaarter

Add To Calendar Reminder

A centered coming-soon screen built around a launch date rather than a countdown: an oversized date heading sits under a kicker and monospace eyebrow, with a decorative "Add to calendar" pill button and a row of Google/Outlook/Apple calendar 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/add-to-calendar-reminder.json

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

Usage

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

export default function Page() {
  return <ComingSoon35 {...comingsoon35Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"(coming soon)"Monospace label above the kicker.
kickerstring"Mark your calendar"Small uppercase label above the date.
launchDatestringnoneLaunch date display text rendered as the oversized heading.
descriptionstring"We'll be live at the stroke of midnight..."Supporting copy under the date.
addToCalendarLabelstring"Add to calendar"Label for the decorative add-to-calendar button.
addToCalendarHrefstring"#"Link target for the add-to-calendar button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static, plain Server Component: no client-side state anywhere.
  • "launchDate" is a plain display string supplied by the caller, not computed from `new Date()` at render time.
  • The "Add to calendar" button and the Google/Outlook/Apple links are all decorative placeholder links (`href="#"` or a configurable placeholder href), no real .ics file is generated and nothing is submitted.