indevInputui

Forms

About

Here is modern input component from idevui

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds indevInputui to your project and fits it to your theme.

Code

How indevInputui is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { Mail } from 'lucide-react';
import Input from '@/components/ui/indev-inputui';

function InputDemo() {
   return (
      <div className="grid w-full max-w-sm items-center gap-4">
         <div className="flex flex-col gap-1.5">
            <label htmlFor="email" className="text-sm font-medium">
               Email
            </label>
            <Input type="email" id="email" placeholder="your.email@example.com" />
         </div>
         <div className="flex flex-col gap-1.5">
            <label htmlFor="file" className="text-sm font-medium">
               Picture
            </label>
            <Input id="file" type="file" />
         </div>
         <div className="relative">
            <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input type="email" placeholder="Email with Icon" className="pl-10" />
         </div>
         <div className="flex flex-col gap-1.5">
            <label htmlFor="disabled" className="text-sm font-medium">
               Disabled
            </label>
            <Input id="disabled" type="email" placeholder="Email" disabled />
         </div>
      </div>
   );
}

export { InputDemo as DemoOne };