A forgot password card with an animated envelope: enter an email, and it opens to show the letter, masks the address and starts a resend countdown.
npx shadcn@latest add https://hyperblur.dev/r/login-forgot-password.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-forgot-password.tsx.
import { LoginForgotPassword } from "@/components/hyperblur/login-forgot-password"
<LoginForgotPassword onSubmit={({ email }) => fetch("/api/forgot", { method: "POST", body: email }).then((r) => r.ok)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Reset your password" | Heading of the email step. |
| subtitle | string | "Enter the email linked to your Harbor account..." | Text under the heading. |
| defaultEmail | string | "" | Initial email value. |
| defaultSent | boolean | false | Start on the link sent state. |
| resendSeconds | number | 45 | Countdown before the link can be sent again. |
| onSubmit | (values: { email: string }) => boolean | void | Promise<boolean | void> | Called with a valid email. Return false to show an error. | |
| onResend | (email: string) => void | Called when the user asks for another link. | |
| back | { label: string; href: string } | { label: "Back to sign in", href: "#sign-in" } | Link in the card footer. |
| mailApp | { label: string; href: string } | null | { label: "Open mail app", href: "mailto:" } | Button on the sent state. Pass null to hide it. |
| accent | string | "#22d3ee" | Accent color for buttons, focus rings and highlights. |