Email first sign in that slides to a password step with the account chip, a caps lock badge and attempt pips. Too many misses lock the form with a countdown.
npx shadcn@latest add https://hyperblur.dev/r/form-login-compact.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-login-compact.tsx.
import { FormLoginCompact } from "@/components/hyperblur/form-login-compact"
<FormLoginCompact onSubmit={async (email, password) => (await signIn(email, password)).ok} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Sign in" | Heading of the card. |
| brand | string | "Northwind" | Product name used in hints and the welcome state. |
| maxAttempts | number | 3 | Wrong passwords allowed before the lock. |
| lockSeconds | number | 30 | Lock duration after too many attempts. |
| accent | string | "#60a5fa" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 900 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onIdentify | (email: string) => void | Promise<void> | Called after the email step. Reject to show an account error. | |
| onSubmit | (email: string, password: string, remember: boolean) => boolean | Promise<boolean> | Return true to sign in. Without it any password of 8 or more characters is accepted. | |
| onForgot | (email: string) => void | Called from the Forgot link. |