Change Password Settings Card React component
A change-password card for account settings: current password with a forgot link, a new password with a four-step strength meter, a live requirements checklist, breach and reuse warnings, a confirm field that says when it matches, show/hide toggles, an option to sign out other devices, and a saving → updated state.
About the Change Password Settings Card component
Change Password Settings Card is the password section of an account settings page, built so people succeed on the first try. The strength meter, rule checklist and match indicator all update as they type, so problems show up before they press Update.
It also catches the mistakes plain forms miss: a password that appeared in a breach, or one that's the same as the current password. After saving, the card confirms the change and can sign out other devices in the same step.
When to use it
Use it in account or security settings wherever signed-in people change their password.
For the signed-out reset flow use the Reset Password Card, and for a standalone meter use the Password Strength Meter.
Installation
Add the Change Password Settings Card component to your project with the shadcn CLI. It lands in components/change-password-settings-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/change-password-settings-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ChangePasswordSettingsCard /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| lastChanged | string | "Changed 3 months ago" |
| onSubmit Return a Promise; reject with an Error whose message is shown under "Current password". | (value: ChangePasswordValue) => void | Promise<void> | — |
| onForgot | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- lastChangedstringDefault: "Changed 3 months ago"
- onSubmit
Return a Promise; reject with an Error whose message is shown under "Current password".
(value: ChangePasswordValue) => void | Promise<void> - onForgot() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Change Password Settings Card FAQ
- How do I show a wrong current password?
- Make onSubmit throw (or return a rejected Promise) with an Error. Its message appears under Current password, that field turns red and gets focus.
- Can I change the rules?
- Yes. RULES is an array of { id, label, test } at the top of the file. Add, remove or reword rules and the checklist and the submit check follow.
- Is the breach check real?
- The demo checks a short list of common passwords. In production, call a k-anonymity breach API (send only the first characters of a SHA-1 hash) or check on your server and throw from onSubmit.
- Why is the submit button never truly disabled?
- It uses aria-disabled so people can still press it and see what's missing; an invalid submit marks the fields instead of doing nothing silently.
- Is it accessible?
- Each field has a label and autocomplete hint, the eye buttons are labelled toggles, the meter, rules and match line are described-by and announced politely, and errors use role=alert.
