Components
Loading preview...
Here is advanced password input with hover
@ui-layouts
npx shadcn@latest add https://21st.dev/r/uilayout.contact/password-input-3'use client';
import React, { useState } from 'react';
import PasswordInput from '@/components/ui/password-input-3';
const PasswordInputDemo = () => {
const [passwordOne, setPasswordOne] = useState('');
const [passwordTwo, setPasswordTwo] = useState('MyStrongPassword!123');
const [passwordThree, setPasswordThree] = useState('weak');
return (
<div className="flex flex-col gap-12 p-8 min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50">
<h1 className="text-4xl font-bold text-center mb-8">Password Input Demos</h1>
<div className="w-96 mx-auto bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 className="text-xl font-semibold mb-4">Default State</h2>
<PasswordInput
id="demo-password-1"
value={passwordOne}
onChange={(e) => setPasswordOne(e.target.value)}
placeholder="Enter your password"
containerClassName="py-0 mx-0 w-full"
/>
</div>
</div>
);
};
export { PasswordInputDemo as DemoOne };