Components
Component Subscribe
A heading and an email field in a pill whose button carries sending, success and failure: Subscribe Input as a section of its own.
Made for the page builder — try it there
Try it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Notes from the studio, once a month" | The block's h2. |
| lead | string | a line about the newsletter | A line under the heading; empty for none. |
| placeholder | string | "Your email" | The field's placeholder and accessible name. |
| submitLabel | string | "Subscribe" | The button's accessible name. |
| successMessage | string | "Thanks — please check your inbox." | What the field says once the address is sent. |
| note | string | no spam, one-click leave | A small line under the field; empty for none. |
| layout | "centred" | "split" | "centred" | centred: one narrow centred column. split: the text beside the field from 1024px. |
| onSubscribe | (email: string) => Promise<void> | void | — | Sends the address: a server action, or a function from a client component. Throw to show the error. Without it the field only pretends to send. |
| className | string | — | Classes for the <section>. |
- Sending is yours: without onSubscribe the field waits 0.9 s and says thanks, so the section can be tried as it is.
- The field's states are Subscribe Input's: sending, success and failure on the round button, announced to screen readers.
