The Input

Forms

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

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

 export default function Input04() {
    return (
      <InputGroup className="mx-4 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
          type="password"
          placeholder="Enter password"
          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">
          <EyeOffIcon />
        </InputGroupAddon>
      </InputGroup>
    )
  }