About
Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Input to your project and fits it to your theme.
Code
How Input is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Button } from '@/components/ui/button-1';
import { Input, InputWrapper } from '@/components/ui/input';
import { Euro, TicketPercent, User, X } from 'lucide-react';
export default function InputDemo() {
return (
<div className="space-y-5 w-80">
<InputWrapper>
<Euro />
<Input type="email" placeholder="Start icon" />
</InputWrapper>
<InputWrapper>
<Input type="email" placeholder="End icon" />
<TicketPercent />
</InputWrapper>
<InputWrapper>
<Button size="sm" variant="dim" mode="icon" className="size-5 -ms-0.5">
<User />
</Button>
<Input type="email" placeholder="Start clickble icon" />
</InputWrapper>
<InputWrapper>
<Input type="email" placeholder="End clickble icon" />
<Button size="sm" variant="dim" mode="icon" className="size-5 -me-0.5">
<X />
</Button>
</InputWrapper>
</div>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.5K
Line Charts 9
670
Alert
495
Line Charts 6
398
Area Charts 1
392
Scroll Area
378
Navigation Menu
329
Area Charts 2
321
More in Forms
View all
Premium Auth
535
Contact Card
1K
Form
17
Login Card
6
Book A Demo 1
78
Text Field
Split Sign In Form
81
Modern & Stunning sign in
1.7K
