Password strength meter

Rates a password by its length and character mix.

Password strengthStrong

password-strength-meter-demo.tsx

import { PasswordStrengthMeter } from "@/components/vip-ui/password-strength-meter";export function PasswordStrengthMeterDemo() {  return (    <PasswordStrengthMeter      password="longer-demo-passphrase"      className="max-w-sm"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-password-strength-meter.json

With password field

Also install Password field.

New password

Use 12 or more characters. The score is an estimate only.

Password strengthNo password

password-strength-meter-field-demo.tsx

"use client";import { useState } from "react";import { PasswordField } from "@/components/vip-ui/password-field";import { PasswordStrengthMeter } from "@/components/vip-ui/password-strength-meter";export function PasswordStrengthMeterFieldDemo() {  const [password, setPassword] = useState("");  return (    <div className="grid w-full max-w-sm gap-3">      <PasswordField        label="New password"        name="new-password"        autoComplete="new-password"        value={password}        onChange={setPassword}        description="Use 12 or more characters. The score is an estimate only."      />      <PasswordStrengthMeter password={password} />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Meter (opens in a new tab).

password: stringRequired: The password to rate. The score uses only length and the mix of letters and other characters. It does not measure how easy the password is to guess.