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 { Input, InputAddon, InputGroup } from '@/components/ui/input';
import { Euro, TicketPercent } from 'lucide-react';
export default function InputDemo() {
return (
<div className="space-y-5 w-80">
<InputGroup>
<InputAddon>Addon</InputAddon>
<Input type="email" placeholder="Start addon" />
</InputGroup>
<InputGroup>
<Input type="email" placeholder="End addon" />
<InputAddon>Addon</InputAddon>
</InputGroup>
<InputGroup>
<InputAddon mode="icon">
<Euro />
</InputAddon>
<Input type="email" placeholder="Start icon addon" />
</InputGroup>
<InputGroup>
<Input type="email" placeholder="End icon addon" />
<InputAddon mode="icon">
<TicketPercent />
</InputAddon>
</InputGroup>
</div>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.4K
Line Charts 9
656
Alert
494
Line Charts 6
392
Area Charts 1
391
Scroll Area
376
Navigation Menu
319
Area Charts 2
318
More in Forms
View all
Premium Auth
524
Contact Card
1K
Book A Demo 1
73
Login 1
53
Form
137
Card Studio
41
SignInPage
667
Modern & Stunning sign in
1.6K
