Skip to content
Beautiful UI

InputsLumen Halo

Password StrengthFreev1.0.0

Four cells and the reason in words, for any password input you already have: it rates the value you pass, says what would make it stronger, and announces changes politely.

Built on shadcn/ui

.md
Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-password-strength.json
Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-password-strength.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Set up the Beautiful UI registry

Free pieces install from their URL with no setup (that URL gives the Base UI build; Radix projects use /r/radix-nova/<name>.json, or add the registries below and the CLI picks your build). Pro pieces need the registries below and BEAUTIFUL_UI_TOKEN in .env.local.

components.json
{
  "registries": {
    "@beautiful-ui": "https://beautiful-ui.dev/r/{style}/{name}.json",
    "@beautiful-ui-pro": {
      "url": "https://beautiful-ui.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${BEAUTIFUL_UI_TOKEN}" }
    }
  }
}

MCP server

claude mcp add --transport http beautiful-ui https://beautiful-ui.dev/api/mcp
Catalog for agents: /llms.txt

Usage

Import it and pass your content. The props that matter most are listed next.

Example
import { PasswordStrength } from "@/components/ui/lumen/controls/password-strength";

<Input id="pw" type="password" value={pw} onChange={(e) => setPw(e.target.value)} aria-describedby="pw-strength" />
<PasswordStrength id="pw-strength" value={pw} />

Props

  • value–

    string

    The password to rate.

  • emptyHint"Use 8 or more characters, …"

    string

    Shown before anything is typed.

  • id–

    string

    Point the input's aria-describedby at it so the verdict is read with the field.

Source

components/ui/lumen/controls/password-strength.tsx

87 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

More in Inputs