Password strength

Free

A new-password field that shows a strength meter and the rules it meets.

Installs components/ui/password-strength.tsxDepends on lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add https://caliperui.site/r/password-strength.json

New password

No password yet

At least 12 characters, not met
Uppercase and lowercase letters, not met
A number, not met
A symbol, not met

Type a password to see its strength.

When to use #

Use it for

Account creation and password changes.
You want live feedback instead of an error after submit.

Skip it when

You are asking for an existing password; use a password field.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/password-strength.json

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from PasswordStrength and scorePassword.

example.tsx

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

export function NewPassword() {
  const [note, setNote] = useState("Type a password to see its strength.");
  return (
    <div className="grid w-full max-w-xs gap-2">
      <PasswordStrength onValueChange={(_value, strength) => setNote(`${strength.word}. ${strength.met} of 4 rules met.`)} />
      <p role="status" className="text-sm text-muted-foreground">{note}</p>
    </div>
  );
}

API reference #