About
Visual indicator for password strength with validation criteria.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Password Strength Meter to your project and fits it to your theme.
Code
How Password Strength Meter is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { PasswordStrengthMeter } from "@/components/ui/password-strength-meter"
import {useState} from 'react';
export const Demo = () => {
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 password"
/>
<PasswordStrengthMeter password={password} />
</div>
);
};