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.
Your Password must include
- At least 12 characters
- At least one uppercase letter
Your Password must include
- At least 12 characters
- At least one uppercase letter
- At least one lowercase letter
barMode
Choose between segmented bars (default) or a continuous full bar.
Your Password must include
- At least 12 characters
- At least one uppercase letter
Your Password must include
- At least 12 characters
- At least one uppercase letter
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
barsNumber
Choose between 3, 4, or 5 strength bars.
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
Multi-language Support
Your Password must include
- At least one number
- At least one special character
Score required
Read the live score with the usePasswordStrength hook and gate your form. Feed it the same password state as the indicator, then disable your submit button until the score is high enough. Try typing until the button unlocks.
Your Password must include
- At least 12 characters
- At least one special character
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 |