Skip to content
Aback UI

Block ยท Marketing

Newsletter signup

An email signup with real submitting, success, and error states driven by your subscribe call.

Beta3 componentsRegistry JSON (opens in a new tab)
the Newsletter signup preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add newsletter

The block lands at components/blocks/newsletter.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Implement onSubscribe with your email provider and return { ok, message }. The block shows exactly that message; it never claims success on its own.
  • Use double opt-in and say so in the success message: "Check your inbox to confirm."
  • Say what you send and how to leave in consent. Do not pre-tick anything.
  • The inline variant fits a sidebar or footer column; the card variant suits the end of an article.

Accessibility

  • The email field has a label (visually hidden in this layout), the email type, and autocomplete=email.
  • The button is disabled while submitting and its text changes, so the state is not only a spinner.
  • The result is written to a status region and linked to the field with aria-describedby.