shadcn-password-strength
A customizable, accessible password strength component for React. Multi-language support, multiple display modes, and dark mode.
Your Password must include
- At least 12 characters
- At least one uppercase letter
Password StrengthStrong
Setup
1. Install Tailwind CSS
Follow the installation guide if not already set up.
2. Initialize shadcn/ui
Set up shadcn/ui in your project.
npx shadcn@latest init
3. Add Input and Label components
Install the required shadcn/ui components.
npx shadcn@latest add input label
4. Install the package
Add shadcn-password-strength to your project.
npm install shadcn-password-strength
5. Import and use
Import package and pass your shadcn/ui components as props.
import { PasswordStrength } from "shadcn-password-strength";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";More Examples
maxRules
Control how many password rules are displayed. Set to 0 for bar-only mode.
Password StrengthGood
Your Password must include
- At least 12 characters
- At least one uppercase letter
Password StrengthGood
Your Password must include
- At least 12 characters
- At least one uppercase letter
- At least one lowercase letter
Password StrengthGood
barsNumber
Choose between 3, 4, or 5 strength bars.
Password StrengthMid
Password StrengthGood
Password StrengthGood
Check email pattern in password
Detects any 4+ consecutive characters from the email. Try "john", "ndoe", or "hndo".
Your Password must include
- Must not contain your email
- At least 12 characters
Password StrengthWeak
Multi-language Support
Your Password must include
- At least one number
- At least one special character
Password StrengthMid
Props
Customization
| Prop | Type | Default | Description |
|---|---|---|---|
| locale | "en" | "fr" | ... | "ko" | "en" | 13 languages supported |
| barsNumber | 3 | 4 | 5 | 5 | Number of bars |
| maxRules | number | 2 | Rules shown, 0 = bar only |
| InputComponent | Component | - | Input shadcn from /ui |
| LabelComponent | Component | - | Label shadcn from /ui |
Common
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | required | Password value |
| onChange | (value) => void | - | Change callback |
| string | - | Check email text pattern un password | |
| forbiddenWords | string[] | - | Words to exclude |
| placeholder | string | - | Input placeholder |
| label | string | - | Input label |