Newsletter Popup React component
A newsletter signup that appears after a delay or part way down the page, with what readers get, how often, a checked email field and a clear thank-you.
About the Newsletter Popup component
Newsletter Popup asks at a sensible moment and says exactly what people get. They can choose how often to hear from you before they sign up.
The email is checked before sending, errors appear without moving anything, and a clear thank-you confirms where the first note will go.
When to use it
Use it on blogs, docs and marketing sites once someone has shown interest.
Give people time to read first. A popup in the first few seconds gets closed without a glance.
Installation
Add the Newsletter Popup component to your project with the shadcn CLI. It lands in components/newsletter-popup.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/newsletter-popupProps
<NewsletterPopup /> accepts 14 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "The Friday Note" |
| message | string | "A short email with what we learned building interfaces this week." |
| perks What readers get, as short lines. | string[] | DEFAULT_PERKS |
| proof Social proof, e.g. "12,400 readers". | string | "Read by 12,400 designers and engineers" |
| frequencies | string[] | DEFAULT_FREQUENCIES |
| buttonLabel | string | "Subscribe" |
| delayMs Open after this many milliseconds. Use 0 to turn it off. | number | 8000 |
| scrollPercent Open past this share of the page, from 0 to 100. Use 0 to turn it off. | number | 0 |
| rememberDays Days to stay away once closed. Use 0 to show it every time. | number | 14 |
| storageKey | string | "newsletter-popup" |
| contained Keep it inside the nearest positioned parent instead of the whole screen. | boolean | false |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "The Friday Note"
- messagestringDefault: "A short email with what we learned building interfaces this week."
- perks
What readers get, as short lines.
string[]Default: DEFAULT_PERKS - proof
Social proof, e.g. "12,400 readers".
stringDefault: "Read by 12,400 designers and engineers" - frequenciesstring[]Default: DEFAULT_FREQUENCIES
- buttonLabelstringDefault: "Subscribe"
- delayMs
Open after this many milliseconds. Use 0 to turn it off.
numberDefault: 8000 - scrollPercent
Open past this share of the page, from 0 to 100. Use 0 to turn it off.
numberDefault: 0 - rememberDays
Days to stay away once closed. Use 0 to show it every time.
numberDefault: 14 - storageKeystringDefault: "newsletter-popup"
- contained
Keep it inside the nearest positioned parent instead of the whole screen.
booleanDefault: false
Show all 14 propsShow fewer
| onSubmit Return a promise to show a loading state. Throw to show an error. | (email: string, frequency: string) => void | Promise<void> | — |
| onClose | () => void | — |
- onSubmit
Return a promise to show a loading state. Throw to show an error.
(email: string, frequency: string) => void | Promise<void> - onClose() => void
Newsletter Popup FAQ
- When does it open?
- After delayMs, or at scrollPercent down the page. Set either to 0 to turn it off.
- How do I connect my email tool?
- Use onSubmit. Return a promise for the loading state, and throw to show an error.
- Will it show again after someone signs up?
- No. A signup is remembered for at least a year.
- Does the card resize on success?
- No. The form and thank-you share one grid cell.
