Staaarter

Typographic Wordmark

A dramatic coming-soon screen: a full-bleed background photo with a dark overlay sits behind an oversized, centered wordmark heading, a supporting tagline, and a light outline notify button. Built to feel like a single, confident brand statement rather than a form-first page.

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

npx shadcn add https://staaarter.com/r/typographic-wordmark-teaser.json

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

Usage

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

export default function Page() {
  return <ComingSoon31 {...comingsoon31Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"(coming soon)"Monospace label above the wordmark.
wordmarkstringnoneOversized centered wordmark/heading text.
taglinestringundefinedOptional supporting line under the wordmark.
imageMediaSlotImageundefinedFull-bleed background photo behind the dark overlay.
notifyLabelstring"Notify me"Label for the decorative notify button.
notifyHrefstring"#"Link target for the notify button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static, plain Server Component: no client-side state anywhere.
  • The notify button is a plain link (`render={<Link href={notifyHref} />}`) with a placeholder href by default, nothing is submitted.

More Coming Soon Blocks

View all →

countdown-timer-launch

Countdown Timer Launch

A centered launch page with a live days/hours/minutes/seconds countdown to a target date.

development-progress-milestones

Development Progress Milestones

A centered launch page with an overall progress bar and a milestone tracker list with status badges.

social-connect-launch

Social Connect Launch

A centered coming-soon page with pill-style outline buttons linking out to Twitter, GitHub, LinkedIn, and email.

animated-icons-preview

Animated Icons Preview

A centered coming-soon page with a row of bobbing icon tiles and a pulsing build-status indicator.

sneak-peek-feature-grid

Sneak Peek Feature Grid

A centered coming-soon page with a grid of blurred feature cards teased behind a lock icon overlay.

waitlist-with-avatars

Waitlist with Avatars

A centered coming-soon page with a working waitlist signup form, stacked subscriber avatars, and a live join count.