Typographic Wordmark

ComingSoon31: Typographic Wordmark

A monochrome, editorial full-bleed image pre-launch statement with a dark overlay, centering a parenthetical eyebrow, a monumental oversized wordmark, a single supporting tagline, and a light outline notify pill button.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon31, comingsoon31Demo } from "@/components/beste/block/comingsoon31";

export default function Page() {
  return <ComingSoon31 {...comingsoon31Demo} />;
}

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

import { ComingSoon31 } from "@/components/beste/block/comingsoon31";

export default function Page() {
  return (
    <ComingSoon31
      badge={{ label: "Coming soon" }}
      wordmark="Auralis"
      tagline="An independent design studio, opening its doors to a small first circle."
      button={{ label: "Tell me when it's live", href: "/waitlist" }}
      image={{ src: "/studio.jpg", alt: "A quiet, light-filled studio interior" }}
    />
  );
}

Props

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

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

Behavior notes

• There is no form or event callback: the button is 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 renders as a plain <img> absolutely positioned behind a fixed bg-foreground/70 overlay, and the eyebrow, wordmark, tagline, and button sit centered in light text over it.
• The eyebrow, wordmark, tagline, and button each render only when their prop is present, so the statement collapses cleanly around whatever you omit.
• The wordmark is set at a text-7xl to md:text-9xl scale with tight leading-[0.9], so it reads as a full-width display line rather than body copy.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.