PasswordStrength
Show a zxcvbn strength meter for the current password.
Example
Installation
- 1
Add the shadcn/ui components
bunx --bun shadcn@latest add field tooltip - 2
Install the packages
bun add @tanstack/react-form zod libphonenumber-js date-fns @zxcvbn-ts/core @zxcvbn-ts/language-common @zxcvbn-ts/language-en lucide-react @base-ui/react - 3
Copy the PasswordStrength files
Usage
Terminal
password: passwordField({ minScore: 3 }),
<FormPassword name="password" />Notes
- FormPassword shows it when the schema sets minScore, or with the strength prop.
- The dictionaries load on first render as a separate chunk.
- passwordField({ minScore }) checks the same score once the dictionaries have loaded.