Setup
1. Install Tailwind CSS
Follow the installation guide if not already set up.
2. Install the package
Add pass-strength-indicator to your project.
npm install pass-strength-indicator
3. Import and use
Import the component and pass your password value.
import { PasswordStrength } from "pass-strength-indicator";Custom props
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
barMode
Choose between segmented bars (default) or a continuous full bar.
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
Password StrengthGood
indicatorBackground
Add a card background around the indicator section. Pass a Tailwind class string or an object with light/dark CSS colors.
Your Password must include
- At least 12 characters
- At least one uppercase 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 |
| barMode | "default" | "full" | "default" | Visual bar mode variant |
| indicatorBackground | string | { light, dark } | - | Wraps indicator in a card with background. Pass Tailwind classes "bg-zinc-100 dark:bg-zinc-900" or CSS colors { light: "#f5f5f5", dark: "#1c1c1c" } |
| barsNumber | 3 | 4 | 5 | 5 | Number of bars |
| maxRules | number | 2 | Rules shown, 0 = bar only |
Common
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | required | Password value |
| string | - | Check email text pattern in password | |
| forbiddenWords | string[] | - | Words to exclude |
| className | string | - | Container class name |
| barClassName | string | - | Strength bar class name |