Password strength meter

<VStack className="w-full max-w-sm" gap={3}>  <PasswordStrengthMeter strength="medium" /></VStack>

Usage

import { PasswordStrengthMeter } from "@reva/ui";

<PasswordStrengthMeter strength="medium" />

Pass a PasswordStrengthLevel from your signup or settings flow; the component does not inspect the password string itself.

Examples

All levels

Default English labels: Empty, Low, Medium, Strong, Very strong. Override with label when localising.

<VStack className="w-full max-w-sm" gap={3}>  <PasswordStrengthMeter strength="empty" />  <PasswordStrengthMeter strength="low" />  <PasswordStrengthMeter strength="medium" />  <PasswordStrengthMeter strength="strong" />  <PasswordStrengthMeter strength="veryStrong" /></VStack>

With password field

Typical pairing: a controlled password InputGroup (show/hide) with PasswordStrengthMeter directly underneath, driven by the same string you send on submit. This demo mirrors apps/auth signup (getPasswordStrength); swap in zxcvbn or server rules in your app.

The preview disables password-manager-friendly autocomplete and sets common extension data-* hints only so vault UIs don’t steal focus or cover the meter — do not copy that for real forms; use normal autoComplete (see note under the demo).

import { PasswordStrengthWithFieldDemo } from "@/components/password-strength-with-field-demo";  <PasswordStrengthWithFieldDemo />

Loop demo (animated)

Single meter that steps through empty → low → medium → strong → very strong on a timer so you can see segment fills, colour tier changes, and label motion in one place. For documentation only — wire real strength from your app in production.

import { PasswordStrengthMeterLoopDemo } from "@/components/password-strength-meter-loop-demo";  <PasswordStrengthMeterLoopDemo />

Props