Newsletter Sample Issues

ComingSoon70: Newsletter Sample Issues

A monochrome Auralis newsletter section (oversized editorial type, a monospace parenthetical eyebrow) that centers a badge, a heading, and a description over a working subscribe email form, then previews upcoming issues in a three-card grid below.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon70, comingsoon70Demo } from "@/components/beste/block/comingsoon70";

export default function Page() {
  return <ComingSoon70 {...comingsoon70Demo} />;
}

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

import { ComingSoon70 } from "@/components/beste/block/comingsoon70";

export default function Page() {
  return (
    <ComingSoon70
      badge={{ label: "The newsletter" }}
      heading="A weekly letter on the craft of building things."
      description="Notes on design, process, and the small decisions that add up."
      issues={[
        { issue: "No. 01", title: "The cost of one more feature", summary: "Why the best product decisions are the ones you talk yourself out of." },
        { issue: "No. 02", title: "Designing for the second week", summary: "Anyone can win day one. Retention is a design problem." },
        { issue: "No. 03", title: "Writing that ships", summary: "How clear copy quietly does the work of a dozen features." },
      ]}
      labels={{
        issuesTitle: "A peek at what's coming",
        placeholder: "[email protected]",
        success: "You're subscribed. The first issue lands next week.",
        cadence: "One thoughtful issue every Sunday. Unsubscribe anytime.",
      }}
    />
  );
}

Props

type IssueItem = {
  issue: string;
  title: string;
  summary: string;
};

type Badge = {
  label: string;
};

type ComingSoon70Labels = {
  issuesTitle?: string;
  placeholder?: string;
  success?: string;
  cadence?: string;
};

Behavior notes

• The subscribe form owns its email state; handleSubmit calls preventDefault and only flips to the success capsule when the trimmed email is non-empty, so there is no external callback to wire.
• On submit the pill-shaped form swaps for a bordered success capsule with a Check icon, and the cadence line hides once submitted since it renders only when cadence is set and the form is not yet submitted.
• The sample-issues grid renders only when issues is non-empty, laying each entry into a fixed three-column card grid with its issue number, title, and summary.
• Both the badge eyebrow and the issuesTitle render through Badge7, sharing the monospace parenthetical treatment.
• Every region is optional: the eyebrow, heading, description, and issue grid each render only when their prop is present.
• No inline markup is parsed: every string renders as plain text, so HTML passed in shows as escaped text.