Newsletter Form

New

An email field whose button turns into a spinner, then a check. Validates and announces errors.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Get the Acme changelog

One short email a month. Try taken@acme.com to see an error.

Installation

$ pnpm dlx shadcn@latest add @soultel/newsletter-form

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/newsletter-form.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/newsletter-form.tsx.

Usage

example.tsx12 lines

import { NewsletterForm } from "@/components/newsletter-form"

export function Footer() {
  return (
    <NewsletterForm
      onSubmit={async (email) => {
        const res = await fetch("/api/subscribe", { method: "POST", body: JSON.stringify({ email }) })
        if (!res.ok) throw new Error("Could not subscribe. Try again.")
      }}
    />
  )
}

Props

Prop	Type	Default	Description
onSubmit	(email: string) => Promise<void> \| void	-	Throw an Error to show its message under the field.
buttonLabel	ReactNode	"Subscribe"	Button text before submitting.
successMessage	ReactNode	-	Shown under the field after a successful submit.
placeholder	string	"you@company.com"	Field placeholder.
label	string	"Email address"	Visually hidden field label.