my/ui

Command Palette

Search for a command to run...

All components

Password Show Hide

inputs

Ui-Layouts component.

responsive · 360px

Install

Same command in any shadcn project — React (Vite/CRA), Next.js, Remix, Astro, and more:

$npx shadcn@latest add https://your-domain/r/showhide-pass.json

Usage

import Cmp from "@/registry/ui-layouts/showhide-pass";

export default function Demo() {
  return <Cmp />;
}

Component source

'use client';
import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';

const PasswordInput = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className='w-96 mx-auto py-14'>
      <label htmlFor='pass' className='text-sm font-normal'>
        Password
      </label>
      <div className='relative mt-1'>
        <input
          type={isVisible ? 'text' : 'password'}
          id='pass'
          placeholder='Password'
          className='dark:bg-neutral-950 bg-neutral-50 w-full outline-hidden focus-within:border-blue-700 rounded-md p-2  border-2 '
        />
        <div
          className='absolute top-3 right-4 text-2xl text-neutral-500 cursor-pointer'
          onClick={() => setIsVisible((prev) => !prev)}
        >
          {isVisible ? <Eye size={22} /> : <EyeOff size={22} />}
        </div>
      </div>
    </div>
  );
};

export default PasswordInput;

Dependencies

lucide-react

Source: Ui-Layouts