The Input

Buttons

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 { SearchIcon } from 'lucide-react'

  import { Button } from '@/components/ui/button'
  import { ButtonGroup } from '@/components/ui/button-group'
  import { Input } from '@/components/ui/input'

  export default function Input14() {
    return (
      <ButtonGroup className="mx-auto flex max-w-sm">
        <Input
          placeholder="Search..."
          className="h-9 flex-1"
        />

        <Button
          variant="outline"
          aria-label="Search"
          className="h-9 w-9 shrink-0 px-0"
        >
          <SearchIcon className="size-4" />
        </Button>
      </ButtonGroup>
    )
  }