Brand logoentauri

Add this component

npx zentauri-ui add password-strength-meter

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Feedback

Password Strength Meter for login and signup forms

Password Strength Meter helps users create stronger passwords by providing real-time visual feedback on password complexity. Integrate it into React dashboards and Next.js registration forms with accessible labels and color-coded strength indicators.

PasswordFair
PasswordStrong

Password Strength Meter variants playground

Pick an appearance, size, shape, and motion flags to preview the password strength meter live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance: DEFAULT, Size: MD, Shape: ROUNDED, Animated: false, Segmented: false

PasswordGood

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Interactive password strength

Type a password to see the strength meter update in real time.

Password strengthWeak

Password Strength Meter API

Generated from the package prop types and variant definitions.

PasswordStrengthMeter

PasswordStrengthMeterProps

Variants

PropTypeDefault
appearance
aquabluecrimsoncyandefaultdestructiveelectricemeraldforestghostglassgradient-blue+33
default
shape
flatpillrounded
rounded
size
lgmdsmxlxs
md

State

PropTypeDefault
value*numbernone

Behavior

PropTypeDefault
animatedboolean | undefinednone
asElementType | undefinednone
labelstring | undefinednone
maxnumber | undefinednone
minnumber | undefinednone
scoreLabelstring | undefinednone
segmentedboolean | undefinednone
showScoreLabelboolean | undefinednone

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

PasswordStrengthMeterVariant

PasswordStrengthMeterVariantProps

Behavior

PropTypeDefault
appearance'default' | 'outline' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'glass' | 'secondary' | 'destructive' | null | undefinednone
shape'rounded' | 'flat' | 'pill' | null | undefinednone
size'md' | 'sm' | 'lg' | 'xl' | 'xs' | null | undefinednone

PasswordStrengthMeterAnimated

PasswordStrengthMeterAnimatedProps

animated

State

PropTypeDefault
value*numbernone

Behavior

PropTypeDefault
animatedboolean | undefinednone
animationPasswordStrengthMeterAnimation | undefinednone
appearance'default' | 'outline' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'glass' | 'secondary' | 'destructive' | null | undefinednone
labelstring | undefinednone
maxnumber | undefinednone
minnumber | undefinednone
scoreLabelstring | undefinednone
segmentedboolean | undefinednone
shape'rounded' | 'flat' | 'pill' | null | undefinednone
showScoreLabelboolean | undefinednone
size'md' | 'sm' | 'lg' | 'xl' | 'xs' | null | undefinednone

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```MotionStyle | undefinednone
titlestring | undefinednone

PasswordStrengthMeterVariant

PasswordStrengthMeterVariantProps

animated

Behavior

PropTypeDefault
appearance'default' | 'outline' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'glass' | 'secondary' | 'destructive' | null | undefinednone
shape'rounded' | 'flat' | 'pill' | null | undefinednone
size'md' | 'sm' | 'lg' | 'xl' | 'xs' | null | undefinednone
CSS variable overrides

Password Strength Meter CSS variables

Override these password strength meter variables on :root, a theme selector, or a component wrapper.

96 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-password-strength-meter-fg: oklch(20.8% 0.042 265.755);
  --zui-password-strength-meter-default-fill: oklch(20.8% 0.042 265.755);
  --zui-password-strength-meter-secondary-fill: oklch(44.6% 0.043 257.281);
  --zui-password-strength-meter-destructive-fill: oklch(45.5% 0.188 13.697);
  --zui-password-strength-meter-emerald-fill: oklch(43.2% 0.095 166.913);
  --zui-password-strength-meter-indigo-fill: oklch(39.8% 0.195 277.366);
  --zui-password-strength-meter-purple-fill: oklch(43.8% 0.218 303.724);
  --zui-password-strength-meter-pink-fill: oklch(45.9% 0.187 3.815);
  --zui-password-strength-meter-rose-fill: oklch(45.5% 0.188 13.697);
  --zui-password-strength-meter-sky-fill: oklch(44.3% 0.11 240.79);
  --zui-password-strength-meter-teal-fill: oklch(43.7% 0.078 188.216);
  --zui-password-strength-meter-yellow-fill: oklch(47.6% 0.114 61.907);
  --zui-password-strength-meter-orange-fill: oklch(47% 0.157 37.304);
  --zui-password-strength-meter-outline-fill: oklch(52% 0.105 223.128);
  --zui-password-strength-meter-ghost-fill: oklch(27.9% 0.041 260.031);
  --zui-password-strength-meter-glass-fill: oklch(20.8% 0.042 265.755);
  --zui-password-strength-meter-gradient-blue-fill: linear-gradient(90deg,oklch(62.3% 0.214 259.815),oklch(62.7% 0.265 303.9));
  --zui-password-strength-meter-gradient-green-fill: linear-gradient(90deg,oklch(72.3% 0.219 149.579),oklch(76.8% 0.233 130.85));
  --zui-password-strength-meter-gradient-red-fill: linear-gradient(90deg,oklch(63.7% 0.237 25.331),oklch(65.6% 0.241 354.308));
  --zui-password-strength-meter-gradient-yellow-fill: linear-gradient(90deg,oklch(79.5% 0.184 86.047),oklch(70.5% 0.213 47.604));
  --zui-password-strength-meter-gradient-purple-fill: linear-gradient(90deg,oklch(62.7% 0.265 303.9),oklch(65.6% 0.241 354.308));
  --zui-password-strength-meter-gradient-teal-fill: linear-gradient(90deg,oklch(70.4% 0.14 182.503),oklch(71.5% 0.143 215.221));
  --zui-password-strength-meter-gradient-indigo-fill: linear-gradient(90deg,oklch(58.5% 0.233 277.117),oklch(62.7% 0.265 303.9));
  --zui-password-strength-meter-gradient-pink-fill: linear-gradient(90deg,oklch(65.6% 0.241 354.308),oklch(64.5% 0.246 16.439));
  --zui-password-strength-meter-gradient-orange-fill: linear-gradient(90deg,oklch(70.5% 0.213 47.604),oklch(63.7% 0.237 25.331));
  --zui-password-strength-meter-blue-fill: #2563eb;
  --zui-password-strength-meter-cyan-fill: #0891b2;
  --zui-password-strength-meter-green-fill: #16a34a;
  --zui-password-strength-meter-lime-fill: #65a30d;
  --zui-password-strength-meter-mint-fill: #10b981;
  --zui-password-strength-meter-ocean-fill: #0284c7;
  --zui-password-strength-meter-sapphire-fill: #1d4ed8;
  --zui-password-strength-meter-lavender-fill: #8b5cf6;
  --zui-password-strength-meter-ruby-fill: #be123c;
  --zui-password-strength-meter-red-fill: #dc2626;
  --zui-password-strength-meter-slate-fill: #475569;
  --zui-password-strength-meter-zinc-fill: #52525b;
  --zui-password-strength-meter-stone-fill: #57534e;
  --zui-password-strength-meter-royal-fill: #4338ca;
  --zui-password-strength-meter-electric-fill: #0ea5e9;
  --zui-password-strength-meter-forest-fill: #166534;
  --zui-password-strength-meter-sunset-fill: #ea580c;
  --zui-password-strength-meter-magenta-fill: #c026d3;
  --zui-password-strength-meter-crimson-fill: #b91c1c;
  --zui-password-strength-meter-aqua-fill: #0f766e;
  --zui-password-strength-meter-plum-fill: #7e22ce;
  --zui-password-strength-meter-track-bg: #0000001a;
  --zui-password-strength-meter-bar-bg-segmented: linear-gradient(90deg,var(--zui-status-error,oklch(45.5% 0.188 13.697)) 0 calc(100%/5),var(--zui-color-orange,oklch(47% 0.157 37.304)) 0 calc(200%/5),var(--zui-color-yellow,oklch(47.6% 0.114 61.907)) 0 calc(300%/5),var(--zui-color-emerald,oklch(43.2% 0.095 166.913)) 0 calc(400%/5),var(--zui-color-indigo,oklch(39.8% 0.195 277.366)) 0);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-password-strength-meter-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-password-strength-meter-default-fill-dark: oklch(98.4% 0.003 247.858);
}

What it does

Displays a progress-style bar that fills proportionally to the password strength score, with color-coded labels (Weak, Fair, Good, Strong, Very Strong).

Use it in registration forms, password change dialogs, or any flow where users create passwords.

Composition and API

The component accepts a numeric value (0-100) representing strength, optional label, size, shape, and appearance variants. Choose between static and animated builds depending on whether framer-motion is available.

Pair with custom scoring logic or integrate with zxcvbn for more sophisticated password analysis.

Common use cases

Use the Password Strength Meter in registration forms, password reset flows, and account settings pages where users create or update passwords. Pair it with a controlled input to calculate strength in real time based on your own scoring logic.

The component accepts a numeric value between min and max, so it works with any scoring algorithm—from simple length/character checks to advanced libraries like zxcvbn.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Password Strength Meter component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize the strength calculation?

The component accepts custom score values via the value prop, so you can use your own scoring algorithm or integrate with libraries like zxcvbn.

Is this Password Strength Meter implementation accessible by default?

Primitives follow sensible defaults using role='meter' and ARIA attributes. Validate critical flows with keyboard-only use and screen readers.