# Newsletter Section

> Newsletter signup for a product blog: headline, topic chips, an email field and a reader avatar stack beside the latest three issues. The address is checked inline, the button holds a spinner while onSubscribe runs, and the form folds into a confirmation that repeats the address and says to check the inbox.

- Slug: `newsletter-section`
- Category: [Calls to action](https://www.assembli.design/category/calls-to-action.md)
- Type: block
- Tags: newsletter, email, subscribe, signup, form, blog, validation
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/newsletter-section
- Page: https://www.assembli.design/components/newsletter-section

![Newsletter Section preview](https://www.assembli.design/thumbnails/newsletter-section-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `React.ReactNode` | `"The Dispatch"` | The newsletter's name, shown beside the mail mark. |
| `cadence` | `React.ReactNode` | `"Every other Thursday"` | How often it goes out, e.g. "Every other Thursday". |
| `title` | `React.ReactNode` | `"Notes from the team, twice a month"` |  |
| `description` | `React.ReactNode` | `"What we shipped, what broke and what we learned fixing it.…` |  |
| `topics` | `NewsletterTopic[]` | `[ { id: "product", label: "Product updates" }, { id: "engin…` | Chips the reader picks from. Leave empty to subscribe to everything. |
| `defaultTopics` | `string[]` |  | Topic ids that start selected. Defaults to all of them. |
| `issues` | `NewsletterIssue[]` | `[]` | The latest issues, newest first. The first three are shown. |
| `archive` | `{ label: string; href: string }` |  |  |
| `upcoming` | `React.ReactNode` |  | A closing line under the issues, e.g. "No. 49 lands Thursday, Nov 6". |
| `proof` | `{ label: React.ReactNode; readers?: NewsletterReader[] }` |  | Social proof under the form, e.g. "Join 24,000 engineers". |
| `placeholder` | `string` | `"you@company.com"` |  |
| `submitLabel` | `string` | `"Subscribe"` |  |
| `hint` | `React.ReactNode` | `"No spam. Unsubscribe in one click."` | The line under the field until something needs saying. |
| `onSubscribe` | `(email: string, topics: string[]) => void \| Promise<void>` |  | Called with a valid address and the picked topic ids. Return a promise to show the pending state; reject to show its message. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/newsletter-section/newsletter-section.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/newsletter-section
```

Registry item JSON: https://www.assembli.design/r/newsletter-section.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.