# Newsletter section (goodtabs UI)

The whole newsletter band: heading, copy, a form slot and fine print.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/newsletter-section.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/newsletter-section`

## Usage

```tsx
import { NewsletterSection } from "@/components/newsletter-section"
import { EmailSignup } from "@/components/ui/email-signup"

<NewsletterSection title="One email a week" note="Leave with one click.">
  <EmailSignup align="center" />
</NewsletterSection>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The headline. |
| description | `ReactNode` |  | What lands in the inbox and how often. |
| note | `ReactNode` |  | Fine print under the form. |
| align | `"center" | "left"` | `"center"` | Centered for a footer band. |
| size | `"sm" | "default"` | `"default"` | Spacing scale. sm fits a card. |
| children | `ReactNode` |  | The form. Pass an EmailSignup or your own. |

## When to use

- Above a footer or at the end of an article
- When the signup needs a heading and promise around it

## When not to use

- For a single inline field, use email-signup alone
- For a full contact form, use contact-section

## Notes for agents

- Server component. The form is the children slot; it reuses email-signup, so install that item too
- Pass align="center" to EmailSignup when the section is centered
- Because email-signup is a client component, any onSubmit handler you pass needs a client wrapper

Docs: https://ui.goodtabs.co/components/newsletter-section