Cloff Labs

Password Strong

Beautiful Password strength measuring component with glowing animated dotted background

Enter a password

Installation

Run the following command

npx shadcn@latest add https://ui.cloffstudio.com/r/password-strong.json

Props

PropsTypeDefaultDescription
valuestringundefinedControlled password value. When provided, component is controlled and internal state is ignored.
onChange(password: string) => voidundefinedCalled when input changes. For controlled usage, update parent state here. For uncontrolled usage, omit and the component manages its own value.
onStrengthChange(score: 0|1|2|3|4|5) => voidundefinedNotified whenever strength score changes. Score is number of satisfied requirements (0–5). 5 = all requirements met (very strong).