Next Issue MagazinePRO

ComingSoon53: Next Issue Magazine

A Polaris two-column coming-soon section styled as a magazine launch, pairing an accent-badged cover image with a masthead, a square eyebrow, a heading, a description, a numbered contents list, and a working email subscribe 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/comingsoon53?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon53, comingsoon53Demo } from "@/components/beste/block/comingsoon53";

export default function Page() {
  return <ComingSoon53 {...comingsoon53Demo} />;
}

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

import { ComingSoon53 } from "@/components/beste/block/comingsoon53";

export default function Page() {
  return (
    <ComingSoon53
      brand="The Review"
      label="Next issue"
      heading="Our first issue drops this autumn."
      description="A quarterly on craft, process, and the people behind the work. Subscribe now and issue one arrives free."
      contents={[
        "The studios rethinking how they charge",
        "A field guide to saying no",
        "Twelve tools we can't work without",
      ]}
      image={{ src: "/cover.jpg", alt: "A printed magazine cover on a desk" }}
      labels={{
        issueBadge: "Issue 01",
        contentsTitle: "Inside this issue",
        placeholder: "Enter your email",
        success: "Subscribed. The first issue lands in your inbox at launch.",
      }}
    />
  );
}

Props

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

type ComingSoon53Labels = {
  issueBadge?: string;
  contentsTitle?: string;
  placeholder?: string;
  success?: string;
};

Behavior notes

• The subscribe 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 cover renders only when image is set, as a plain <img> filling a bg-muted frame, with an accent bg-primary issue badge pinned top-left whenever labels.issueBadge is present.
• The contents block renders only when contents is non-empty, listing each item with a zero-padded accent index (01, 02, ...) over top-and-bottom borders, and its title depends on labels.contentsTitle.
• The masthead, eyebrow, heading, and description 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.