An email capture block with inline validation and shake, a spinner while submitting and a success state that morphs the button into a check.
Slow travel and small cameras.
One email a week. Leave any time.
npx shadcn@latest add https://hyperblur.dev/r/newsletter-signup.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/newsletter-signup.tsx.
import { NewsletterSignup } from "@/components/hyperblur/newsletter-signup"
<NewsletterSignup onSubmit={async (email) => { await fetch('/api/subscribe', { method: 'POST', body: email }); }} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Get the Friday dispatch" | Heading. Pass an element to style it your own way. |
| description | ReactNode | "One short email every week with new features, product notes and what we are reading." | Helper text under the heading. |
| placeholder | string | "you@company.com" | Input placeholder. |
| buttonLabel | string | "Subscribe" | Label of the submit button. |
| successMessage | string | "You are in. Check your inbox to confirm." | Message shown inside the field after a successful submit. |
| privacyNote | ReactNode | "No spam. Unsubscribe with one click." | Small note under the form. |
| align | "center" | "left" | "center" | Alignment of the heading, text and note. |
| accent | string | "#2f7bff" | Color of the submit button and the focus ring. |
| onSubmit | (email: string) => void | Promise<void> | Called with the trimmed email once it is valid. While a returned promise is pending the button shows a spinner. A rejection shows an inline error. |