Newsletter signup
An email signup as its own band: the pitch on one side and the field on the other, with sending, done and error states.
npx prodular-ui add newsletter-signupDefault
Enter any address to see the done state.
"use client"
import { NewsletterSignup } from "@/components/ui/newsletter-signup"
export default function NewsletterSignupDefault() { return ( <div className="w-full max-w-4xl"> <NewsletterSignup title="Get the changelog by email" lead="One email every two weeks with what shipped. Nothing else." note="Unsubscribe with one click." onSubscribe={() => new Promise((r) => setTimeout(r, 700))} /> </div> )}Error
onSubscribe throws, so the message shows under the field.
"use client"
import { NewsletterSignup } from "@/components/ui/newsletter-signup"
export default function NewsletterSignupError() { return ( <div className="w-full max-w-4xl"> <NewsletterSignup title="Product updates" lead="Try any valid address: this one always fails, to show the error." action="Sign up" onSubscribe={() => new Promise((_, reject) => setTimeout(() => reject(new Error("We could not reach the mailing list. Try again in a minute.")), 700))} /> </div> )}Anatomy
<Section size="sm"> <NewsletterSignup title="Product updates" onSubscribe={subscribe} /></Section>Guidance
Use it when
- At the end of a changelog or blog, where people already want more.
- note to say how often you send.
Avoid
- A second signup on the same page as the footer newsletter.
- Promising content you do not send.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Throw an Error with a readable message from onSubscribe; it is shown as is.
- Put it in a Section with size sm.
API
NewsletterSignup
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubscribe | (email: string) => Promise<void> | void | Subscribes the address. Throw to show the error. | |
| title / lead / note | ReactNode | The pitch and the line under the field. | |
| action | string | "Subscribe" | The button text. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add newsletter-signup# or, with the registry in components.jsonnpx shadcn@latest add @prodular/newsletter-signup