A new password form with a four-segment strength meter, a rules checklist that ticks off as you type, a time-to-crack estimate, confirmation matching and a success state.
You're resetting the password for jordan.ellis@tidewater.io.
npx shadcn@latest add https://hyperblur.dev/r/login-reset-password.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-reset-password.tsx.
import { LoginResetPassword } from "@/components/hyperblur/login-reset-password"
<LoginResetPassword account="sam@acme.com" onSubmit={({ password }) => resetPassword(token, password)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Choose a new password" | Form heading. |
| subtitle | string | "You're resetting the password for" | Text before the account email. |
| account | string | "jordan.ellis@tidewater.io" | Account the password belongs to. |
| minLength | number | 12 | Minimum number of characters. |
| defaultPassword | string | "" | Initial password value. |
| onSubmit | (values: { password: string }) => boolean | void | Promise<boolean | void> | Called when every rule passes and both fields match. Return false to show the expired link error. | |
| signIn | { label: string; href: string } | { label: "Continue to sign in", href: "#sign-in" } | Button on the success state. |
| accent | string | "#2f7bff" | Accent color for buttons, focus rings and highlights. |