The Input

Buttons 4

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 { ArrowUpIcon, PlusIcon } from 'lucide-react'

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

  export default function Input17() {
    return (
      <ButtonGroup className="mx-auto flex max-w-md">
        <Button
          variant="outline"
          size="icon"
          aria-label="Add attachment"
          className="h-9 w-9 shrink-0"
        >
          <PlusIcon className="size-4" />
        </Button>

        <InputGroup className="h-9 min-w-0 flex-1 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="Send a message..."
            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"
          >
            <InputGroupButton aria-label="Send message" size="icon-xs">
              <ArrowUpIcon />
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </ButtonGroup>
    )
  }