Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Newsletter Dialog for React

A newsletter dialog that asks only for an email, with Maybe Later and Subscribe under the field.

Subscribe opens Subscribe to our newsletter. The only field is Email address, with the placeholder you@example.com. Maybe Later and Subscribe sit under it.

Use it when signup should be a single field. A note tied to one button can live in a Popover instead. In React, Base UI does not add the address to a list.

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

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Subscribe
  </DialogTrigger>
  <DialogContent className="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Subscribe to our newsletter</DialogTitle>
      <DialogDescription>
        Get the latest updates and news delivered to your inbox.
      </DialogDescription>
    </DialogHeader>
    <Field>
      <FieldLabel htmlFor="newsletter-email">Email address</FieldLabel>
      <Input
        autoComplete="email"
        id="newsletter-email"
        name="email"
        placeholder="you@example.com"
        type="email"
      />
    </Field>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>
        Maybe Later
      </DialogClose>
      <Button>Subscribe</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

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.

API Reference

Dialog

No extra props in this demo. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets htmlFor="newsletter-email". The rest is on the Field page.

Input

Sets autoComplete="email", id="newsletter-email", name="email", placeholder="you@example.com" and type="email". The rest is on the Input page.

All 17 dialog examples