Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Newsletter Dialog for React

A newsletter dialog with one email field, a Maybe Later button and a Subscribe action.

Framework
UI library

A newsletter signup should take seconds. This React dialog asks for an email and nothing else, with a soft Maybe Later to decline. It's shadcn.io's Dialog on Base UI with an Input in a Field.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do I validate the email?

type="email" gives you the browser's check and the right mobile keyboard. Disable Subscribe until the address is valid and show a FieldError otherwise.

What happens after subscribing?

Close the dialog and confirm with a toast, or swap the content for a thank-you. Send a confirmation email for double opt-in. Pass open and update it in onOpenChange, which receives the new boolean.

Should I link the privacy policy?

Yes. Add a line under the field saying what you'll send and linking your policy; some regions require explicit consent.

Should it open when people try to leave?

Sparingly, if at all: once per visitor, and never again after they decline.

Why Maybe Later instead of Cancel?

It's softer and leaves the door open. It's a DialogClose, so it simply closes the dialog.

How do I show the request in progress?

Give Subscribe isLoading while the request runs, and keep the dialog open until it settles so errors can show inline.

All 17 dialog examples