Chewypixel component
Password Input
A password field with a button that shows or hides what you typed. The eye icon swaps with a quick pop.
Installation
npx shadcn@latest add @chewypixel/password-inputUsage
import { Label } from "@/components/ui/label";
import { PasswordInput } from "@/components/ui/password-input";
export function PasswordField() {
return (
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<PasswordInput id="password" autoComplete="current-password" />
</div>
);
}Props
...propsEverything Input takes except type, which the toggle controls.
ComponentProps<typeof Input>
Released under the MIT License.
More components
- Code InputOne box per digit for verification codes, with a blinking caret in the next box. Pasting a code and autofill from SMS both work.
- Copy ButtonAn icon button that copies text. The copy icon pops into a check, then back.
- ShimmerText with a band of light sweeping across it, for loading and thinking states.
- Status GraphicIllustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.