# Centered Signup With Consent

> Centered newsletter signup with an inline email field, subscribe button, marketing consent checkbox, and a no-spam privacy note.

A shadcn/ui block from the [@7ovr](https://7ovr.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/7ovr/newsletter-1).

- Page, with a live preview: https://shadcn.exchange/r/7ovr/newsletter-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/newsletter-1-light-47f44e90a8a533fe.png
- Registry item: https://7ovr.com/r/newsletter-1.json
- Categories: newsletter
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/newsletter-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@base-ui/react`
- Registry items: `button`, `checkbox`, `input`, `sonner`

## Files

### `registry/blocks/newsletter/1/newsletter-block.tsx`

```tsx
"use client"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Toaster } from "@/components/ui/sonner"
import { IconPlaceholder } from "@/components/icons/icon-placeholder"

export default function NewsletterBlock() {
  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
      <Toaster />
      <div className="mx-auto flex w-full max-w-lg flex-col items-center text-center">
        <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl">
          Stay in the loop
        </h2>
        <p className="mt-3 text-base text-muted-foreground">
          Get product updates, curated articles, and early access to new Acme
          features, delivered weekly, no noise.
        </p>

        <form
          className="mt-8 flex w-full flex-col gap-3"
          onSubmit={(e) => {
            e.preventDefault()
            toast.success("You're subscribed. Welcome aboard!")
          }}
        >
          <div className="flex w-full flex-col gap-2 sm:flex-row">
            <Input
              type="email"
              placeholder="you@company.com"
              aria-label="Email address"
              className="h-9 flex-1"
            />
            <Button type="submit" size="lg" className="shrink-0">
              <IconPlaceholder
                lucide="Send"
                tabler="IconSend"
                hugeicons="MailSendIcon"
                phosphor="PaperPlane"
                remixicon="RiMailSendLine"
                data-icon="inline-start"
                aria-hidden="true"
              />
              Subscribe
            </Button>
          </div>
          <div className="flex items-center justify-center gap-2">
            <Checkbox id="newsletter-consent" name="consent" />
            <label
              htmlFor="newsletter-consent"
              className="text-sm font-normal text-muted-foreground"
            >
              I agree to receive marketing emails.
            </label>
          </div>
        </form>

        <p className="mt-4 flex items-center gap-1.5 text-xs text-muted-foreground">
          <IconPlaceholder
            lucide="ShieldCheck"
            tabler="IconShieldCheck"
            hugeicons="Shield01Icon"
            phosphor="ShieldCheck"
            remixicon="RiShieldCheckLine"
            aria-hidden="true"
            className="shrink-0 text-muted-foreground"
            size={13}
          />
          No spam, ever. Unsubscribe at any time. We respect your privacy.
        </p>
      </div>
    </section>
  )
}
```