Components
Loading preview...
Visual indicator for password strength with validation criteria.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/password-strength-meterimport { 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>
);
};