Staaarter

Pre-Launch Manifesto

A pre-launch manifesto card on a soft muted surface: a monospace eyebrow and a large statement heading up top, followed by a three-column ruled list of numbered building principles, and a decorative rounded "Follow along" pill link at the bottom.

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/pre-launch-manifesto.json

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

Usage

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

export default function Page() {
  return <ComingSoon19 {...comingsoon19Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"(coming soon)"Monospace label above the heading.
headingstring"We're building something we'd want to use ourselves"Large statement heading.
principlesManifestoPrinciple[]noneNumbered building principles rendered in three ruled columns.
followLabelstring"Follow along"Pill link label.
followHrefstring"#"Link target for the pill link.
classNamestringnoneExtra classes for the outer section element.

Types

interface ManifestoPrinciple {
  title: string;
  description: string;
}

Behavior notes

  • Fully static Server Component: the pill link is a plain link (render={<Link href={followHref} />}) with no onClick, nothing is submitted anywhere.
  • Principle numbers (01, 02, 03...) are computed from array index, not stored on each item.
  • The three columns are divided by vertical rules (divide-x) at the sm breakpoint and up, and stack with horizontal rules (divide-y) on mobile.