Newsletter Form

A signup section with an email input and subscribe button under a short pitch. Collects leads for a newsletter, waitlist, or product updates.

import { Button } from "@/components/ui/button";

export default function NewsletterFormCTA() {
  return (
    <>
      {/* Newsletter CTA Section */}
      <div className="py-16 md:py-24 bg-muted">
        <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
          <div className="mx-auto max-w-2xl space-y-6 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Subscribe to our newsletter
              </h2>
              <p className="mx-auto max-w-[600px] text-muted-foreground md:text-xl">
                Get the latest updates and news delivered to your inbox.
              </p>
            </div>
            <div className="mx-auto w-full max-w-md">
              <form className="flex flex-col sm:flex-row w-full gap-2">
                <input
                  type="email"
                  placeholder="Enter your email"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                  required
                />
                <Button type="submit" className="sm:w-auto">
                  Subscribe
                </Button>
              </form>
            </div>
            <p className="text-xs text-muted-foreground">
              We respect your privacy. Unsubscribe at any time.
            </p>
          </div>
        </div>
      </div>
      {/* End Newsletter CTA Section */}
    </>
  );
}

About this block

Newsletter Form is a centered signup section set on a muted panel. A bold headline sits above a one-line supporting sentence, and below that a compact inline form holds an email input and a Subscribe button side by side on wider screens. A short privacy note closes the block, letting visitors know they can leave at any time.

The headline, supporting copy, input placeholder, and button label are all independent pieces of copy. The privacy line is equally easy to swap for a frequency promise or a subscriber count, and the whole section can sit anywhere a muted background break makes sense in a layout.

When to use

Reach for this block when you want to capture email addresses without committing a full page to the task. It suits an online education platform that drips course announcements, a waitlist page for an upcoming cohort, or a mid-page nudge between a feature section and the footer. Compared to a split-layout or image-backed alternative, the centered form keeps the reader focused on the address field with nothing competing for attention.

A natural flow around it on a Marketing (Legacy) page:

Before

A feature section to establish what the reader is subscribing to learn about
Stats to show audience size and build confidence before the ask

After

A simple centered CTA if you want a harder conversion push after the soft signup
A footer to close the page cleanly

What you can display

The most natural use is collecting emails for a newsletter or waitlist, but the form adapts to several similar goals:

Course launch updates. Point the headline at an upcoming curriculum and use the privacy note to set expectations about send frequency.
Early access signups. Swap the supporting line to name a specific release date so interested visitors know when to expect news.
Community digest. Frame the pitch around curated links or weekly roundups to attract readers who want a filtered feed, not a sales funnel.

Tip: keep the supporting sentence to one clear promise so readers know exactly what lands in their inbox before they type their address.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A feature section to establish what the reader is subscribing to learn about
Stats to show audience size and build confidence before the ask

After

A simple centered CTA if you want a harder conversion push after the soft signup
A footer to close the page cleanly

What you can display

The most natural use is collecting emails for a newsletter or waitlist, but the form adapts to several similar goals:

Course launch updates. Point the headline at an upcoming curriculum and use the privacy note to set expectations about send frequency.
Early access signups. Swap the supporting line to name a specific release date so interested visitors know when to expect news.
Community digest. Frame the pitch around curated links or weekly roundups to attract readers who want a filtered feed, not a sales funnel.

Tip: keep the supporting sentence to one clear promise so readers know exactly what lands in their inbox before they type their address.

Newsletter Form

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display