Image Mosaic Notify

ComingSoon52: Image Mosaic Notify

A Polaris coming-soon section that tiles a full-bleed image mosaic under a dark overlay and centers a single-accent notify card holding a square eyebrow, a heading, a description, and 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/comingsoon52?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon52, comingsoon52Demo } from "@/components/beste/block/comingsoon52";

export default function Page() {
  return <ComingSoon52 {...comingsoon52Demo} />;
}

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

import { ComingSoon52 } from "@/components/beste/block/comingsoon52";

export default function Page() {
  return (
    <ComingSoon52
      label="Nearly open"
      heading="The gallery opens soon."
      description="A new home for the work our community makes. Leave your email and be first through the doors."
      images={[
        { src: "/mosaic/one.jpg", alt: "Studio work sample" },
        { src: "/mosaic/two.jpg", alt: "Studio work sample" },
        { src: "/mosaic/three.jpg", alt: "Studio work sample" },
        { src: "/mosaic/four.jpg", alt: "Studio work sample" },
      ]}
      labels={{
        placeholder: "Enter your email",
        success: "You're on the list. We'll be in touch at launch.",
        note: "Join 4,000+ people already waiting.",
      }}
    />
  );
}

Props

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

type ComingSoon52Labels = {
  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 background mosaic renders only when images is non-empty, tiling plain <img> elements in a grid-cols-2 / md:grid-cols-4 grid at -z-20, with a bg-foreground/70 overlay at -z-10 above them.
• The notify card is a centered bg-background panel in a max-w-md column, so its content always sits above the image and overlay layers.
• The eyebrow, heading, and description each render only when their prop is 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.