Staaarter

Newsletter Sample Issues

A centered coming-soon screen for a newsletter, with a monospace eyebrow, heading, and a working subscribe email form with a success state. Below it sits a three-card grid previewing the first few upcoming issues, each with an issue label, title, and short description.

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

npx shadcn add https://staaarter.com/r/newsletter-sample-issues.json

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

Usage

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

export default function Page() {
  return <ComingSoon70 {...comingsoon70Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"(launching soon)"Monospace label above the heading.
headingstring"A newsletter worth waiting for"Main heading.
descriptionstring"Subscribe now and get our first three issues..."Supporting copy under the heading.
issuesUpcomingIssue[]noneUpcoming issues rendered in the three-card preview grid.
classNamestringnoneExtra classes for the outer section element.

Types

export interface UpcomingIssue {
  label: string;
  title: string;
  description: string;
}

Behavior notes

  • The subscribe email form is real client state (useState): submitting swaps it for a confirmation message, nothing is sent to a server.
  • The three-card issue preview grid is fully static, non-interactive content.

More Coming Soon Blocks

View all →

Countdown Timer Launch

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

Development Progress Milestones

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

Social Connect Launch

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

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

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

Waitlist with Avatars

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