The Input

Buttons 1

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

  import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupInput,
  } from '@/components/ui/input-group'
  import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
  } from '@/components/ui/tooltip'

  export default function Input08() {
    return (
      <TooltipProvider>
        <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="API key"
            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"
          >
            <Tooltip delayDuration={300}>
              <TooltipTrigger asChild>
                <InputGroupButton aria-label="API key help" size="icon-xs">
                  <CircleHelpIcon />
                </InputGroupButton>
              </TooltipTrigger>
              <TooltipContent side="top">
                Find your API key in project settings under Integrations.
              </TooltipContent>
            </Tooltip>
          </InputGroupAddon>
        </InputGroup>
      </TooltipProvider>
    )
  }