Store Drop Coming Soon

ComingSoon58: Store Drop Coming Soon

A Polaris e-commerce coming-soon section with a square eyebrow, a heading, a description, a drop-date card, a grid of product teaser cards with blurred prices, and a working email notify 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/comingsoon58?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon58, comingsoon58Demo } from "@/components/beste/block/comingsoon58";

export default function Page() {
  return <ComingSoon58 {...comingsoon58Demo} />;
}

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

import { ComingSoon58 } from "@/components/beste/block/comingsoon58";

export default function Page() {
  return (
    <ComingSoon58
      label="The drop"
      heading="The autumn collection lands Friday."
      description="Twelve pieces, made in small runs. Join the list for early access and prices, fifteen minutes before everyone else."
      products={[
        { image: { src: "/tee.jpg", alt: "Product teaser" }, name: "The Everyday Tee", teasedPrice: "38" },
        { image: { src: "/runner.jpg", alt: "Product teaser" }, name: "Trail Runner", teasedPrice: "120" },
        { image: { src: "/bag.jpg", alt: "Product teaser" }, name: "Weekender Bag", teasedPrice: "95" },
      ]}
      labels={{
        dropCaption: "Drops",
        dropDate: "Friday, 10am",
        priceSuffix: "",
        placeholder: "Enter your email",
        success: "You're on the list. We'll ping you the moment it drops.",
      }}
    />
  );
}

Props

type ProductItem = {
  image: { src: string; alt: string };
  name: string;
  teasedPrice: string;
};

type ComingSoon58Labels = {
  dropCaption?: string;
  dropDate?: string;
  priceSuffix?: 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 drop-date card renders whenever labels.dropCaption or labels.dropDate is set, floating to the right of the heading on wider screens with the date in the accent color.
• The product grid renders only when products is non-empty, and each card teases the price by rendering a plain $, the teasedPrice under a blur-[7px] select-none aria-hidden span, and an optional labels.priceSuffix, so the figure is visually obscured rather than removed.
• Each product image is a nested { src, alt } object rendered as a plain <img> inside a 4:5 bg-muted frame.
• The eyebrow, heading, and description each render only when their prop is present, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.