Newsletter Signup Section: Free React + Tailwind Component

A subscription form section with input animation, a submit-success transformation, and social proof.

A centered newsletter signup section: the email input lights up with a glow on focus, the submit button transforms in turn into a spinning loading circle and then a success checkmark, and a paper plane flies out of the button. Below it, a stack of subscriber avatars plus a headcount provides social proof, and the count ticks up by one the moment a signup succeeds.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add newsletter-signup-section.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Headlinetitle

Subheadingsubtitle

Button labelbuttonLabel

Subscriber countsubscriberCount

12480

Reset delay after success (ms)resetDelay

3200

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<NewsletterSignupSection/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/newsletter-signup-section.en.json

Or, once registries are configured in components.json, install it as @webberui/newsletter-signup-section.

Usage

import { NewsletterSignupSection } from "@/components/ui/newsletter-signup-section";

<NewsletterSignupSection
  title="One email a week, design inspiration straight to your inbox"
  subtitle="Handpicked UI animation techniques and frontend trends. Unsubscribe whenever you like."
  subscriberCount={12480}
  onSubscribe={async (email) => {
    await fetch("/api/subscribe", {
      method: "POST",
      body: JSON.stringify({ email }),
    });
  }}
/>

Props

Prop	Type	Default	Description
`title`	`string`	`"Subscribe to our newsletter"` (Subscribe to our newsletter)	The section's main heading
`subtitle`	`string`	`"Weekly selections delivered directly to your inbox; you can unsubscribe at any time."` (Handpicked content straight to your inbox every week. Unsubscribe whenever you like.)	Subheading text
`placeholder`	`string`	`"you@example.com"`	Placeholder text for the email input
`buttonLabel`	`string`	`"Subscribe"` (Subscribe)	Default text on the submit button
`successLabel`	`string`	`"Subscribed"` (Subscribed)	Text the button shows after a successful submit
`successMessage`	`string`	`"Thank you for subscribing! A confirmation email has been sent to your inbox."` (Thanks for subscribing! A confirmation email is on its way to your inbox.)	The message shown below the form after success
`subscriberCount`	`number`	`12480`	Total number of subscribers, shown in the social-proof text
`avatars`	`string[]`	`["Lin","Chen","Tickets","Wang","Li"]`	The list of initials for the avatar stack; each string renders as one gradient avatar
`onSubscribe`	`(email: string) => void \| Promise<void>`	—	Called on submit; on rejection an error is shown and the form returns to its waiting-for-input state
`resetDelay`	`number`	`3200`	Delay before resetting automatically after success (milliseconds); `0` means it stays in the success state
`className`	`string`	—	Forwarded to the outermost section

Accessibility

The email input has an sr-only label, type="email", and autoComplete="email", so browser autofill works
Error and success messages live in an aria-live="polite" region, so assistive technology announces them right away
On a format error the input is marked aria-invalid and associated with the error text through aria-describedby
While submitting, the button is marked aria-busy and disabled, which prevents submitting twice
When the user has "reduce motion" enabled at the system level, the paper plane flight and the error shake animation are disabled, leaving only the fade-in feedback
The avatar stack is decorative content (aria-hidden), and the subscriber count is provided as plain text

Newsletter Signup Section