Newsletter
v1.0.15Updated 19 Oct 2026Email-capture / newsletter sign-up section with inline and card layouts. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 13 stories▸Why this is recommendednewsletteremailsubscribesignup+3
Newsletter — inline.
- ✓Landing pages
- ✓Blog footers
- ✓Marketing pages
- Inline, card, split and gradient layouts
- Email input + submit button
- No dead links: the privacy-policy footnote needs privacyHref - without it the phrase renders as plain text, never as a dead anchor (condo69 fb_bc8045e2 / fb_f8fba1de)
- Client-side routing: linkComponent renders the privacy link through the host app link component (fb_bf7dc63a)
- benefitIcons makes the benefit-row art the caller own, with the shipped marks as the default
- ✕In-app screens
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the newsletter family (headings, subcopy, email placeholder, subscribe button, benefit rows, privacy footnotes, aria-labels) for i18n or white-labelling. Merged over DEFAULT_NEWSLETTER_LABELS.
—privacyHrefYour privacy-policy page, for the NewsletterCard footnote. Without it the words labels.cardPrivacyLink still render as plain text, so the sentence stays grammatical and nothing invites a click. It used to be a hardwired dead anchor (fb_bc8045e2 / fb_f8fba1de).
—linkComponentThe host app link component (next/link, React Router Link) for the privacy link. Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—benefitIconsThe glyphs beside the NewsletterWithBenefits rows. Defaults to the shipped marks; the row copy comes from labels, so a caller who rewrites the benefits can replace the marks too. A shorter array leaves the remaining rows unmarked.
—