Mobile App Pre-Register

ComingSoon24: Mobile App Pre-Register

A two-column mobile-app pre-launch section from the Polaris set that leads with a single accent color, pairing a square eyebrow, a heading, a supporting paragraph, platform chips, and a dark seal pre-register button on the left with a portrait app-preview tile carrying a floating pre-registration counter on the right.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon24, comingsoon24Demo } from "@/components/beste/block/comingsoon24";

export default function Page() {
  return <ComingSoon24 {...comingsoon24Demo} />;
}

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

import { ComingSoon24 } from "@/components/beste/block/comingsoon24";

export default function Page() {
  return (
    <ComingSoon24
      label="Mobile App"
      heading="Your workspace, now in your pocket."
      description="Pre-register today and the app installs itself the day it lands."
      platforms={["Coming to iOS", "Coming to Android"]}
      button={{ label: "Pre-register Free", href: "/pre-register" }}
      image={{ src: "/app-preview.jpg", alt: "A person using a mobile productivity app" }}
      labels={{
        availability: "Free to pre-register. Nothing to pay until you choose a plan.",
        statValue: "12,800",
        statLabel: "already pre-registered",
      }}
    />
  );
}

Props

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

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

type ComingSoon24Labels = {
  availability?: string;
  statValue?: string;
  statLabel?: string;
};

Behavior notes

• There are no event callbacks: the seal CTA renders via Button1 asChild wrapping a Next.js <Link href={button.href} /> with the dark tone, so it always points at a URL.
• Each platform renders as a bordered bg-muted chip; the whole chip row renders only when platforms is non-empty.
• The right column is a portrait 9/16 app tile with the image absolutely covering a rounded bordered frame, and the floating counter renders when either labels.statValue or labels.statLabel is set, pinned to the tile bottom in a backdrop-blurred panel.
• Each region is optional: the eyebrow, heading, description, platform chips, button, availability line, and image each render only when their prop or label is present.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.