Newsletter CTA
A dark call-to-action block with email validation, pending, error and a success state that replaces the form.
Overview
A newsletter block that handles the boring parts properly. The address is validated before anything is sent, errors appear under the field in plain words, and the button shows a pending state. On success the form is replaced by a confirmation that names the address, so nobody submits twice.
It sits on a quiet ink panel with a faint grid that reads as texture, not decoration, and collapses to a stacked form on phones.
Use it at the end of articles, landing pages and footers. Pass your API call as onSubscribe. Double opt-in copy is already in the success message.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/newsletter-cta.jsonnpx shadcn@latest add https://sundaeui.dev/r/newsletter-cta.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/newsletter-cta.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/newsletter-cta.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy newsletter-cta.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { NewsletterCta } from '@/components/sundae/newsletter-cta'
<NewsletterCta title="One good email a month." onSubscribe={(email) => fetch('/api/subscribe', { method: 'POST', body: JSON.stringify({ email }) }).then((r) => { if (!r.ok) throw new Error('Try again') })} />Props
| Prop | Type | Default |
|---|---|---|
title*Heading. | ReactNode | — |
descriptionSupporting copy. | string | — |
noteSmall print under the form. | string | — |
buttonLabelButton text. | string | 'Subscribe' |
onSubscribe*Throw to show an error. | (email) => Promise<void> | — |
Accessibility
- The input is labelled and its message is linked with aria-describedby. Errors use role="alert".
- The success state is a status message.
Customization
- Swap bg-zinc-950 for your brand ink. The grid opacity is set on the svg.
FAQ
- Is Newsletter CTA free?
- Newsletter CTA is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Newsletter CTA?
- Run npx shadcn@latest add https://sundaeui.dev/r/newsletter-cta.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Newsletter CTA support keyboard and screen readers?
- The input is labelled and its message is linked with aria-describedby. Errors use role="alert". The success state is a status message.
- Does Newsletter CTA respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All sections →Margin Quote
Sections · Editorial- Pro
Ledger Pricing
Sections · Editorial - Pro
Billboard Hero
Sections · Brutalist - Pro
Bento Features
Sections · Understated - Pro
Product Footer
Sections · Understated - Pro
Changelog Timeline
Sections · Editorial