Product Pre-Order Teaser

ComingSoon63: Product Pre-Order Teaser

An Auralis product launch coming-soon section that sets a full-height product image beside a monospace parenthetical eyebrow, a product name, a tagline, a ship date, a working notify email form that swaps to a success state, and a spec grid.

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

Base UI flavor

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

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

Quick start

The installed file exports comingsoon63Demo alongside the block: the exact props behind the preview above. Spread it to get a working pre-order teaser in one line.

import { ComingSoon63, comingsoon63Demo } from "@/components/beste/block/comingsoon63";

export default function Page() {
  return <ComingSoon63 {...comingsoon63Demo} />;
}

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

import { ComingSoon63 } from "@/components/beste/block/comingsoon63";

export default function Page() {
  return (
    <ComingSoon63
      badge={{ label: "Pre-order soon" }}
      heading="The Field Watch, Series 02."
      tagline="Machined titanium, a sapphire face, and a movement built to outlive its trends. Reserve yours before the first run sells out."
      specs={[
        { label: "Case", value: "38mm titanium" },
        { label: "Glass", value: "Sapphire crystal" },
        { label: "Water", value: "100m rated" },
      ]}
      image={{ src: "/watch.jpg", alt: "A minimal field watch on a neutral surface" }}
      labels={{
        releaseLabel: "Ships",
        releaseValue: "November 2026",
        placeholder: "[email protected]",
        success: "You're on the list. We'll open pre-orders to you first.",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

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

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

type ComingSoon63Labels = {
  releaseLabel?: string;
  releaseValue?: string;
  placeholder?: string;
  success?: string;
};

Behavior notes

• The notify form owns its email state and swaps to a success panel on submit; handleSubmit calls preventDefault and only flips when the trimmed email is non-empty, so there is no external callback to wire.
• The image renders only when set, as a plain <img> filling a bg-muted frame beside the copy column.
• The ship-date line renders whenever labels.releaseLabel or labels.releaseValue is set, pairing a muted label with a bold value over a top border.
• The spec grid renders only when specs is non-empty, as three columns of label-over-value pairs below the form.
• Following the Auralis monochrome language, the form is a rounded-full pill with a bg-foreground text-background submit button, and the eyebrow, heading, and tagline each render only when their prop is present; every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.