Launch Day Announcement

ComingSoon25: Launch Day Announcement

An editorial launch-date announcement from the Polaris set that leads with a single accent color, pairing a square eyebrow and a kicker with an oversized date headline on the left and a supporting note plus a dark seal remind-me button on the right, above a three-column ruled list of launch facts.

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/comingsoon25?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon25, comingsoon25Demo } from "@/components/beste/block/comingsoon25";

export default function Page() {
  return <ComingSoon25 {...comingsoon25Demo} />;
}

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

import { ComingSoon25 } from "@/components/beste/block/comingsoon25";

export default function Page() {
  return (
    <ComingSoon25
      label="Launch Day"
      heading="October 24"
      description="Version one goes public with a live walkthrough and a launch-week offer."
      button={{ label: "Remind Me", href: "/remind" }}
      facts={[
        { value: "09:00 PT", label: "Live stream and open Q&A" },
        { value: "Version 1.0", label: "Our first public release" },
        { value: "30 days free", label: "For everyone who joins launch week" },
      ]}
      labels={{ kicker: "The wait ends" }}
    />
  );
}

Props

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

type FactItem = {
  value: string;
  label: string;
};

type ComingSoon25Labels = {
  kicker?: string;
};

Behavior notes

• There are no event callbacks: the seal CTA renders via Button1 asChild wrapping a Next.js <Link href={button.href} /> with the dark tone, so it always points at a URL.
• The top row is a md:grid-cols-[1fr_auto] split that pins the kicker and date headline left and the note plus button right, with a bottom rule under the whole row.
• The facts grid collapses to md:grid-cols-3, pairing each bold value with its label, and renders only when facts is non-empty.
• Each region is optional: the eyebrow, kicker, heading, description, button, and facts each render only when their prop or label is present.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.