Account creation with a live username availability check, email typo suggestions and four password checks that fill as bars. Ends on an animated envelope with a resend countdown.
Free for 14 days. No credit card required.
npx shadcn@latest add https://hyperblur.dev/r/form-signup.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-signup.tsx.
import { FormSignup } from "@/components/hyperblur/form-signup"
<FormSignup takenUsernames={["admin"]} onSubmit={({ email }) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Create your account" | Heading of the card. |
| subtitle | string | "Free for 14 days. No credit card required." | Line under the heading. |
| brand | string | "Lumen" | Brand name shown with the mark and used for the username URL prefix. |
| takenUsernames | string[] | ["admin", "maya", "lumen", "support", "root", "design"] | Usernames reported as taken by the availability check. |
| emailDomains | string[] | common providers | Domains used for the 'Did you mean' suggestion. |
| resendSeconds | number | 30 | Cooldown before the verification email can be resent. |
| submitLabel | string | "Create account" | Text of the submit button. |
| accent | string | "#8b5cf6" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 1200 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onSubmit | (values: FormSignupValues) => void | Promise<void> | Called with email, username and password once every check passes. | |
| onResend | (email: string) => void | Called when the verification email is resent. |