Newsletter Section

Newsletter signup for a product blog: headline, topic chips, an email field and a reader avatar stack beside the latest three issues. The address is checked inline, the button holds a spinner while onSubscribe runs, and the form folds into a confirmation that repeats the address and says to check the inbox.

Tags: newsletter email subscribe signup form blog validation
Dependencies: lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

name
React.ReactNode
Default "The Dispatch"
The newsletter's name, shown beside the mail mark.
cadence
React.ReactNode
Default "Every other Thursday"
How often it goes out, e.g. "Every other Thursday".
title
React.ReactNode
Default "Notes from the team, twice a month"
description
React.ReactNode
Default "What we shipped, what broke and what we learned fixing it.…
topics
NewsletterTopic[]
Default [ { id: "product", label: "Product updates" }, { id: "engin…
Chips the reader picks from. Leave empty to subscribe to everything.
defaultTopics
string[]
Topic ids that start selected. Defaults to all of them.
issues
NewsletterIssue[]
Default []
The latest issues, newest first. The first three are shown.
archive
{ label: string; href: string }
upcoming
React.ReactNode
A closing line under the issues, e.g. "No. 49 lands Thursday, Nov 6".
proof
{ label: React.ReactNode; readers?: NewsletterReader[] }
Social proof under the form, e.g. "Join 24,000 engineers".
placeholder
string
Default "you@company.com"
submitLabel
string
Default "Subscribe"
hint
React.ReactNode
Default "No spam. Unsubscribe in one click."
The line under the field until something needs saying.
onSubscribe
(email: string, topics: string[]) => void | Promise<void>
Called with a valid address and the picked topic ids. Return a promise to show the pending state; reject to show its message.

Prop	Type	Default	Description
name	React.ReactNode	"The Dispatch"	The newsletter's name, shown beside the mail mark.
cadence	React.ReactNode	"Every other Thursday"	How often it goes out, e.g. "Every other Thursday".
title	React.ReactNode	"Notes from the team, twice a month"
description	React.ReactNode	"What we shipped, what broke and what we learned fixing it.…
topics	NewsletterTopic[]	[ { id: "product", label: "Product updates" }, { id: "engin…	Chips the reader picks from. Leave empty to subscribe to everything.
defaultTopics	string[]	–	Topic ids that start selected. Defaults to all of them.
issues	NewsletterIssue[]	[]	The latest issues, newest first. The first three are shown.
archive	{ label: string; href: string }	–
upcoming	React.ReactNode	–	A closing line under the issues, e.g. "No. 49 lands Thursday, Nov 6".
proof	{ label: React.ReactNode; readers?: NewsletterReader[] }	–	Social proof under the form, e.g. "Join 24,000 engineers".
placeholder	string	"you@company.com"
submitLabel	string	"Subscribe"
hint	React.ReactNode	"No spam. Unsubscribe in one click."	The line under the field until something needs saying.
onSubscribe	(email: string, topics: string[]) => void \| Promise<void>	–	Called with a valid address and the picked topic ids. Return a promise to show the pending state; reject to show its message.