Image Notify BarPRO

ComingSoon55: Image Notify Bar

A Polaris full-bleed image coming-soon hero with a bottom gradient and light text, a square eyebrow, a large heading, and a supporting line, set beside a solid notify card holding a working email form that swaps to a success state.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon55, comingsoon55Demo } from "@/components/beste/block/comingsoon55";

export default function Page() {
  return <ComingSoon55 {...comingsoon55Demo} />;
}

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

import { ComingSoon55 } from "@/components/beste/block/comingsoon55";

export default function Page() {
  return (
    <ComingSoon55
      label="Almost ready"
      heading="Something worth the wait is nearly here."
      description="We're a few weeks from opening the doors. Leave your email and we'll make sure you're among the first inside."
      image={{ src: "/landscape.jpg", alt: "A misty landscape at first light" }}
      labels={{
        formTitle: "Be the first to know",
        placeholder: "Enter your email",
        success: "You're on the list. We'll send word the day we open.",
        note: "No spam, unsubscribe anytime.",
      }}
    />
  );
}

Props

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

type ComingSoon55Labels = {
  formTitle?: string;
  placeholder?: string;
  success?: string;
  note?: 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> pinned absolutely at -z-10, with a bg-gradient-to-t from-foreground/85 scrim above it so the light eyebrow, heading, and description read against the photo.
• The eyebrow uses Badge6 with a text-background/80 label class, and the heading and description are set in text-background tones tuned for the dark overlay.
• The notify card is a solid bg-background panel: its labels.formTitle renders only when present, and the note line renders under the form only while the form has not been submitted.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.