nordaun
blockpasswordsource: ok · refreshed
Password
A super simple password input component with a toggle options that hides or reveals your password.
npx shadcn add "https://ui.nordaun.com/r/password.json"free
Interaction
scroll-reveal
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lighticonslucide-react
Files1
src/components/ui/password.tsx
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group";
import { Eye, EyeClosed } from "lucide-react";
function Password({ className, ...props }: React.ComponentProps<"input">) {
const [visible, setVisible] = React.useState<boolean>(false);
return (
<InputGroup>
<InputGroupInput
type={visible ? "text" : "password"}
{...props}
className={className}
/>
<InputGroupAddon align={"inline-end"}>
<Button
variant={"link"}
type="button"
onClick={() => setVisible(!visible)}
>
{visible ? <Eye /> : <EyeClosed />}
</Button>
</InputGroupAddon>
</InputGroup>
);
}
export { Password };