Password Strength Meter

Forms

About

A segmented password strength meter that scores an input against length, casing, digit and symbol rules and shows a live criteria checklist.

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

"use client";

import * as React from "react";
import { PasswordStrength } from "@/components/ui/password-strength";

export default function PasswordStrengthDemo() {
  const [value, setValue] = React.useState("TicketSecret!2026");

  return (
    <div className="flex w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6 shadow-sm">
        <label className="mb-2 block text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-muted-foreground">
          Current Key
        </label>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Enter a password"
          className="mb-4 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
        />
        <PasswordStrength value={value} />
      </div>
    </div>
  );
}