A one line newsletter field where the button sweeps across the input while it subscribes, then turns into a confirmation with a shortcut to the right inbox. Invalid emails shake and raise a tooltip.
The Interface, a Thursday letter on product craft.
npx shadcn@latest add https://hyperblur.dev/r/form-subscribe-inline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-subscribe-inline.tsx.
import { FormSubscribeInline } from "@/components/hyperblur/form-subscribe-inline"
<FormSubscribeInline onSubmit={(email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "you@studio.com" | Input placeholder. |
| buttonLabel | string | "Subscribe" | Button text. |
| frequencies | string[] | ["Weekly", "Monthly"] | Frequency options shown under the field. |
| readers | string | "Join 12,400 designers" | Social proof line next to the avatars. |
| accent | string | "#ff4f8b" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 1300 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onSubmit | (email: string, frequency: string) => void | Promise<void> | Called with the email and chosen frequency. Reject to shake the field. |