A newsletter signup with an issue preview, frequency choice and honest send states.
Import it and pass your content. The props that matter most are listed next.
import { Newsletter } from "@/components/ui/notchset/blocks/newsletter";
export function Signup() {
return (
<Newsletter
variant="card"
eyebrow="THE TRACE · A RELAY NEWSLETTER"
frequencies={[{ value: "monthly", label: "MONTHLY", headline: "One email a month", body: "What shipped, what broke and what we learned." }]}
onSubscribe={(email) =>
fetch("/api/newsletter", { method: "POST", body: JSON.stringify({ email }) }).then((r) => {
if (!r.ok) throw new Error("subscribe failed");
})
}
footnote="NO TRACKING PIXELS · ONE-CLICK UNSUBSCRIBE"
/>
);
}variant–
"inline" | "card"Inline shows the issue deck; card is compact with the readers under it.
eyebrow–
stringThe line above the headline (also the section's name).
frequencies–
{ value, label, headline, body, issues? }[]Two or more add a switch that rewrites the copy and the deck.
frequency / onFrequencyChange–
string / (value) => voidControl the frequency (optional).
onSubscribe–
(email, frequency) => PromiseResolve to show CHECK YOUR INBOX; reject to show the failure line (the email stays).
readers–
{ count, label, initials }The readers line; the count rolls up by one on a signup.
footnote / sentTo / failure–
ReactNode / (email) => string / stringThe line under the form, the success line and the failure line.
Newsletterdata-slot="newsletter"
The signup, inline or as a card.
components/ui/notchset/blocks/newsletter.tsx
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/newsletter.jsonpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/newsletter.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Give your coding assistant the Markdown guide instead of screenshots.
https://beautiful-ui.dev/api/mcp (setup)v1.0.0 · 2026-10-04
First release