Launch Season RevealPRO

ComingSoon18: Launch Season Reveal

A monochrome, editorial full-bleed image pre-launch hero from the Auralis set that overlays a parenthetical eyebrow at the top and, pinned to the bottom, a small kicker, an oversized launch-date headline, a supporting line, and a light outline pill notify button, all lifted above a dark scrim.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon18, comingsoon18Demo } from "@/components/beste/block/comingsoon18";

export default function Page() {
  return <ComingSoon18 {...comingsoon18Demo} />;
}

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

import { ComingSoon18 } from "@/components/beste/block/comingsoon18";

export default function Page() {
  return (
    <ComingSoon18
      badge={{ label: "Save the date" }}
      heading="Autumn 2026"
      description="The full catalogue and the first open studio hours all land when the season turns."
      button={{ label: "Notify me at launch", href: "/waitlist" }}
      image={{ src: "/autumn.jpg", alt: "Warm autumn light across a quiet interior" }}
      labels={{ kicker: "Doors open" }}
    />
  );
}

Props

type Badge = {
  label: string;
};

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

type ImageItem = {
  src: string;
  alt: string;
};

type ComingSoon18Labels = {
  kicker?: 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} /> with the outline tone, so it always points at a URL.
• The image is a plain <img> absolutely covering the section behind a fixed bg-foreground/60 scrim, so the light foreground copy stays legible over any photo.
• The section is a min-h-[600px] flex column that pins the eyebrow to the top and the kicker, heading, description, and button to the bottom via justify-between.
• Every region is optional: the eyebrow, kicker, heading, description, button, and image each render only when their prop or label is present.
• Every string is plain text with no inline markup parsing, so HTML passed into the heading or description shows as escaped text.