The Input

Forms

About

Here is The Input component

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

Code

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

Usage.tsx

import { Search } from 'lucide-react'

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group'
 export default function Input02() {
    return (
      <InputGroup className="max-w-sm hover:border-ring hover:ring-[3px] hover:ring-ring/20 focus-within:border-ring focus-within:ring-[3px] focus-
  within:ring-ring/20">
        <InputGroupAddon className="pointer-events-none border-0 bg-transparent">
          <Search />
        </InputGroupAddon>

        <InputGroupInput
          placeholder="Search..."
          className="border-0 bg-transparent shadow-none outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
        />
      </InputGroup>
    )
  }