Strength Meter

Reports how strong a password is, in three steps and one word.

Weak

Configurations

Supported configurations for this component.

3 examples

Weak

Medium

Strong

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
valuereq	`string`	-	The password being judged. The meter reads the value itself instead of taking a score, so the screen cannot report a strength the form disagrees with.
minLength	`number`	12	Below this many typed characters the password is Weak, whatever else it contains. Set it to the same number the form actually enforces.
strongLength	`number`	16	At this many typed characters the password is Strong on length alone. Between the two bounds, three of the four character families are what reach Strong.
className	`string`	-	Extra classes merged onto the root element.
style	`React.CSSProperties`	-	Inline styles merged onto the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.