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.3K
Line Charts 9
637
Alert
492
Area Charts 1
385
Line Charts 6
384
Scroll Area
376
Area Charts 2
317
Navigation Menu
305
More in Forms
View all
Premium Auth
500
Login 2
7
Authentication Card
47
Login 1
52
Contact Card
1K
Login Form
6
Form
16
Book A Demo 3
83
