The Input

Component

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

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

  export default function Input06() {
    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="Searching..."
          className="border-0 bg-transparent shadow-none outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
        />

        <InputGroupAddon
          align="inline-end"
          className="border-0 bg-transparent"
        >
          <Loader2Icon className="size-4 animate-spin text-muted-foreground" />
        </InputGroupAddon>
      </InputGroup>
    )
  }