Password Strength Meter

Visual indicator for password strength with validation criteria.

Preview

•At least 8 characters

•Contains uppercase letter

•Contains number

•Contains special character

This component is available on 21st.dev.

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/hextaui/password-strength-meter"

Usage

App.tsx

import { PasswordStrengthMeter } from "@/components/library/application/PasswordStrengthMeter";

export const PasswordStrengthMeter = () => {
  const [password, setPassword] = useState("");

  return (
    <div className="flex flex-col gap-4">
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        className="w-full px-3 py-2 border rounded-md focus-visible:ring-0 focus-within:ring-0 focus:outline-white/10"
        placeholder="Enter your password"
      />
      <PasswordStrengthMeter password={password} />
    </div>
  );
};