shadcn-password-strength

A customizable password strength indicator component for React with multi-language support

Features

• 13 languages supported: English, French, Spanish, German, Portuguese, Italian, Dutch, Polish, Swedish, Ukrainian, Chinese, Japanese, Korean
• Flexible display: Show 0-5 validation rules, or bar-only mode
• Configurable strength levels: 3, 4, or 5 bars
• Email pattern detection: Prevents users from using parts of their email in passwords
• Forbidden words: Block specific words from being used
• shadcn/ui integration: Uses your own Input/Label components for consistent styling
• Dark mode support out of the box
• Fully typed with TypeScript

Installation

# 1. Install shadcn/ui components (if not already installed)
npx shadcn@latest add input label

# 2. Install the package
npm install shadcn-password-strength

Quick Start

import { useState } from 'react';
import { PasswordStrength } from 'shadcn-password-strength';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export function PasswordForm() {
  const [password, setPassword] = useState('');

  return (
    <PasswordStrength
      value={password}
      onChange={setPassword}
      InputComponent={Input}
      LabelComponent={Label}
    />
  );
}

Examples

Bar Only Mode

Set maxRules={0} to hide validation rules and show only the strength bar:

<PasswordStrength
  value={password}
  onChange={setPassword}
  maxRules={0}
  InputComponent={Input}
  LabelComponent={Label}
/>

Multi-language Support

Available locales: en, fr, es, de, pt, it, nl, pl, sv, uk, zh, ja, ko

<PasswordStrength
  value={password}
  onChange={setPassword}
  locale="de"
  InputComponent={Input}
  LabelComponent={Label}
/>

Email Pattern Detection

Prevents users from including any 4+ consecutive characters from their email:

<PasswordStrength
  value={password}
  onChange={setPassword}
  email="[email protected]"
  InputComponent={Input}
  LabelComponent={Label}
/>

Custom Number of Bars

Choose between 3, 4, or 5 strength bars:

<PasswordStrength
  value={password}
  onChange={setPassword}
  barsNumber={3}
  InputComponent={Input}
  LabelComponent={Label}
/>

Full Configuration

<PasswordStrength
  value={password}
  onChange={setPassword}
  locale="fr"
  barsNumber={5}
  maxRules={3}
  email="[email protected]"
  forbiddenWords={['password', 'company']}
  InputComponent={Input}
  LabelComponent={Label}
/>

Props

Required

| Prop | Type | Description | | ---------- | ------------------------- | ---------------- | | value | string | Password value | | onChange | (value: string) => void | Change callback |

Shadcn Components

| Prop | Type | Description | | ---------------- | ----------- | ------------------------------- | | InputComponent | Component | Your Input from @/components/ui | | LabelComponent | Component | Your Label from @/components/ui |

Package Customization

| Prop | Type | Default | Description | | ------------- | -------------------------------------------------------------- | ------- | ----------------------------------------- | | locale | "en" \| "fr" \| ... \| "ko" | "en" | Language (en, fr, es, de, pt, it, nl, pl, sv, uk, zh, ja, ko) | | barsNumber | 3 \| 4 \| 5 | 5 | Number of strength indicator bars | | maxRules | number | 2 | Max validation rules shown (0 = bar only) | | placeholder | string | - | Input placeholder text | | label | string | - | Input label text |

Validation

| Prop | Type | Description | | ---------------- | ---------- | ---------------------------------------------- | | email | string | Detects 4+ consecutive chars from email | | forbiddenWords | string[] | Words that cannot be in the password (-2 score)|

Visibility Toggle

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | ------------------------------------------------ | | showToggleVisibility | boolean | true | Show/hide password visibility toggle button | | toggleTabIndex | number | -1 | Tab index for the visibility toggle button |

Styling

| Prop | Type | Description | | ---------------- | -------- | -------------------------------------------- | | className | string | Additional class name for the container | | barClassName | string | Additional class name for the strength bars | | inputClassName | string | Additional class name for the input field |

Password Rules

The component validates passwords against these rules:

1. Minimum length: At least 12 characters
2. Uppercase: At least one uppercase letter
3. Lowercase: At least one lowercase letter
4. Number: At least one digit
5. Special character: At least one special character
6. No email pattern (optional): No 4+ consecutive characters from email
7. No forbidden words (optional): None of the specified forbidden words

Documentation

For full documentation and live examples, visit the documentation site.

License

MIT