A password field whose eye button watches your pointer and caret, blinks open to reveal, and flips each character between dot and letter in a wave. It also warns when Caps Lock is on.
Welcome back
npx shadcn@latest add https://hyperblur.dev/r/micro-password-eye.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-password-eye.tsx.
import { MicroPasswordEye } from "@/components/hyperblur/micro-password-eye"
<MicroPasswordEye name="password" autoComplete="new-password" hint="At least 12 characters" />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Password" | Visible label linked to the input. |
| value | string | Controlled value. Pair with onValueChange. | |
| defaultValue | string | "" | Initial value when uncontrolled. |
| revealed | boolean | Controlled reveal state. Pair with onRevealedChange. | |
| defaultRevealed | boolean | false | Initial reveal state when uncontrolled. |
| accent | string | "#2f7bff" | Caret, focus ring and open eye color. |
| hint | string | Optional helper text under the field. | |
| onValueChange | (value: string) => void | Called on every edit. | |
| onRevealedChange | (revealed: boolean) => void | Called when the eye is toggled. | |
| ...rest | InputHTMLAttributes<HTMLInputElement> | Every other prop goes to the input: name, placeholder, autoComplete, required, disabled and so on. |