A minimal dark waitlist with one inline email field over a breathing halo. Invalid input shakes the field, the button shows a spinner while saving, and the form morphs into a success pill with a drawn check.
Changelog turns merged pull requests into a beautiful product update. Leave your email and we will send an invite.
No spam. One email when your invite is ready.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-inline-pill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-inline-pill.tsx.
import { WaitlistInlinePill } from "@/components/hyperblur/waitlist-inline-pill"
<WaitlistInlinePill onSubmit={({ email }) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | "Private beta, spring 2026" | Mono label above the title. |
| title | string | "Ship release notes your users actually read" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| placeholder | string | "you@company.com" | Email field placeholder. |
| ctaLabel | string | "Join waitlist" | Submit button label. |
| successLabel | string | "You are on the list" | Bold line in the success pill. |
| note | string | "No spam. One email when your invite is ready." | Small print under the form. |
| onSubmit | (values: { email: string }) => void | Promise<void> | Called with the trimmed email after validation. A rejected promise shows an error. Nothing is posted by the component. | |
| accent | string | "#22d3ee" | Halo, button and success color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |