About
Displays a form input field, input groups, number input spinners, etc.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Base Input to your project and fits it to your theme.
Code
How Base 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/base-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>
);
}
















