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 { useState } from 'react'
  import { XIcon } from 'lucide-react'

  import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupInput,
  } from '@/components/ui/input-group'

  export default function Input07() {
    const [value, setValue] = useState('')

    return (
      <InputGroup className="mx-auto 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">
        <InputGroupInput
          placeholder="Search..."
          value={value}
          onChange={(event) => setValue(event.target.value)}
          className="border-0 bg-transparent shadow-none outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
        />

        {value.length > 0 && (
          <InputGroupAddon
            align="inline-end"
            className="border-0 bg-transparent"
          >
            <InputGroupButton
              aria-label="Clear"
              size="icon-xs"
              onClick={() => setValue('')}
            >
              <XIcon />
            </InputGroupButton>
          </InputGroupAddon>
        )}
      </InputGroup>
    )
  }