Color Input

A sophisticated color input component with opacity control, color swatches, and clipboard integration. Features - Color Management - HEX color input - Visual color preview - One-click copy to clipboard - Color swatches for quick selection - Opacity Control - Smooth slider control (0-100%) - Visual gradient feedback - Custom styled thumb matching selected color - Real-time color preview

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Color Input to your project and fits it to your theme.

import { ColorInput } from "@/components/ui/color-input";

function ColorInputDemo() {
  return (
    <div className="block">
      <ColorInput />
    </div>
  );
}

export { ColorInputDemo };