"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type PasswordStrengthLevel = "weak" | "fair" | "good" | "strong";

const strengthOrder: PasswordStrengthLevel[] = [
  "weak",
  "fair",
  "good",
  "strong",
];

const strengthLabels: Record<PasswordStrengthLevel, string> = {
  weak: "Weak",
  fair: "Fair",
  good: "Good",
  strong: "Strong",
};

export interface PasswordStrengthProps
  extends React.HTMLAttributes<HTMLDivElement> {
  strength?: PasswordStrengthLevel;
  showLabel?: boolean;
}

export function PasswordStrength({
  strength,
  showLabel = true,
  className,
  ...props
}: PasswordStrengthProps) {
  const index = strength ? strengthOrder.indexOf(strength) + 1 : 0;
  const percent = Math.min(Math.max((index / strengthOrder.length) * 100, 0), 100);

  return (
    <div className={cn("flex flex-col gap-2", className)} {...props}>
      <div className="h-2 w-full overflow-hidden rounded-full border border-border bg-muted">
        <div
          className="h-full rounded-full transition-all duration-300"
          style={{
            width: `${percent}%`,
            backgroundImage:
              "linear-gradient(90deg, hsl(var(--muted-foreground)), hsl(var(--foreground)), hsl(var(--primary)))",
          }}
        />
      </div>
      {showLabel ? (
        <div className="flex items-center justify-between text-sm">
          <span className="text-muted-foreground">Password strength</span>
          <span
            className={cn(
              "font-medium",
              strength ? "text-foreground" : "text-muted-foreground"
            )}
            aria-live="polite"
          >
            {strength ? strengthLabels[strength] : "Not rated"}
          </span>
        </div>
      ) : null}
    </div>
  );
}
Password Strength

Dependencies

Files

Installation
