Pre-Launch ManifestoPRO

ComingSoon19: Pre-Launch Manifesto

A monochrome, editorial pre-launch manifesto from the Auralis set that sits on a soft muted card with a parenthetical eyebrow, a large statement heading, a supporting paragraph, a three-column ruled list of numbered building principles, and a follow-along pill button beneath.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon19?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon19?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon19.tsx.

Quick start

The installed file exports comingsoon19Demo alongside the block: the exact props behind the preview above. Spread it to get a working manifesto section in one line.

import { ComingSoon19, comingsoon19Demo } from "@/components/beste/block/comingsoon19";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon19 } from "@/components/beste/block/comingsoon19";

export default function Page() {
  return (
    <ComingSoon19
      badge={{ label: "What we're building" }}
      heading="Not another launch. A studio that stays out of your way."
      description="We're taking our time so the first release earns its place."
      principles={[
        {
          title: "Slow enough to be right",
          description: "We ship a feature when it holds up under real work, not when a countdown says so.",
        },
        {
          title: "Nothing to relearn",
          description: "Every screen borrows from tools you already trust.",
        },
        {
          title: "Yours to leave",
          description: "Your files export in one click on day one. No lock-in.",
        },
      ]}
      button={{ label: "Follow the build", href: "/updates" }}
    />
  );
}

Props

type Badge = {
  label: string;
};

type ActionLink = {
  label: string;
  href: string;
};

type PrincipleItem = {
  title: string;
  description: string;
};

Behavior notes

• There are no event callbacks: the button renders as a real navigation via Button12 asChild wrapping a Next.js <Link href={button.href} />, so it always points at a URL.
• Each principle carries an auto-generated two-digit index built with String(index + 1).padStart(2, "0"), so numbering comes from list order rather than a prop.
• The principle grid renders only when principles is non-empty, collapsing to md:grid-cols-3 with a top rule on each entry; the eyebrow, heading, description, and button each render only when their prop is present.
• The whole block sits inside a rounded bg-muted card, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.