Password Strength

Forms 1.3K

About

An animated password strength meter with segmented bars, a live requirements checklist, and common-pattern detection for signup and reset forms.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Password Strength to your project and fits it to your theme.

Code

How Password Strength is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { PasswordStrength } from "@/components/ui/password-strength";
import { useId, useState } from "react";

export function PasswordStrengthDemo() {
  const id = useId();
  const [value, setValue] = useState("");

  return (
    <div className="mx-auto w-full max-w-[320px]">
      <label
        htmlFor={id}
        className="block text-[13px] font-medium text-stone-700 dark:text-stone-200"
      >
        New password
      </label>

      <input
        id={id}
        type="password"
        value={value}
        autoComplete="new-password"
        spellCheck={false}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Type a password"
        className="mt-1.5 h-10 w-full rounded-[10px] border-2 border-stone-200 bg-stone-100/70 px-3 text-[13px] text-stone-700 shadow-[inset_0_1px_2px_rgba(28,25,23,0.07)] outline-none transition-[background-color,border-color,box-shadow] duration-150 placeholder:text-stone-400 focus:border-[#4568FF] focus:bg-white focus:shadow-none focus-visible:outline-none dark:border-white/[0.08] dark:bg-[#1D1D1A] dark:text-stone-200 dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.45)] dark:placeholder:text-stone-500 dark:focus:border-[#93B0FF] dark:focus:bg-[#252522]"
      />

      <PasswordStrength value={value} className="mt-3" />
    </div>
  );
}

export default PasswordStrengthDemo;