# Newsletter

> An email sign-up (newsletter subscribe) form. It announces the result to screen readers through a live region that is on the page from the start.

Facade UI item `newsletter` (block, section).
Docs page: https://facadeui.dev/components/newsletter · Registry JSON: https://facadeui.dev/r/newsletter.json

## Install

```bash
npx shadcn@latest add @facade/newsletter
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/newsletter.json`. The CLI also installs what it needs: @facade/button, @facade/container, @facade/input, @facade/section, @facade/section-header, @facade/types, @facade/utils.

Files: `components/sections/newsletter.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/newsletter-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
"use client"

import { useState } from "react"

import { Newsletter, type NewsletterStatus } from "@/components/sections/newsletter"

export function Demo() {
  const [status, setStatus] = useState<NewsletterStatus>("idle")

  // Stands in for a server action or a fetch. The section owns no network call.
  const submit = (email: string) => {
    if (!email.includes("@")) {
      setStatus("error")
      return
    }
    setStatus("submitting")
    window.setTimeout(() => setStatus("success"), 900)
  }

  return (
    <Newsletter
      eyebrow="Changelog"
      title="One email when something ships"
      description="No drip campaign, no webinar invitations."
      onSubmit={submit}
      status={status}
      errorMessage="Enter a valid email address."
      note="Unsubscribe in one click. We never share your address."
    />
  )
}
```

## Props

### NewsletterProps

Extends SectionBaseProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `string` |  |  |
| `description` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `onSubmit` | `(email: string) => void` |  | Called with the submitted address. Make the network request in your own code. |
| `status` | `NewsletterStatus` | `"idle"` | Controls the button, the live region, and the field's error state. |
| `successMessage` | `ReactNode` | `"Thanks — check your inbox to confirm."` | Announced on success. |
| `errorMessage` | `string` |  | Announced on failure and attached to the field. |
| `label` | `string` | `"Email address"` |  |
| `hideLabel` | `boolean` | `true` |  |
| `placeholder` | `string` | `"you@example.com"` |  |
| `submitLabel` | `string` | `"Subscribe"` |  |
| `note` | `ReactNode` |  | Small print under the form, such as consent, frequency or how to unsubscribe. |
| `layout` | `"inline" \| "stacked"` | `"inline"` | `inline` puts the button inside the field; `stacked` puts it below. |
| `variant` | `"plain" \| "muted" \| "card"` | `"muted"` |  |
| `align` | `"start" \| "center"` | `"center"` |  |