Color Picker

Forms 76

About

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

Code

How Color Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  ColorPicker,
  ColorPickerSelection,
  ColorPickerHue,
  ColorPickerAlpha,
  ColorPickerOutput,
  ColorPickerEyeDropper,
  ColorPickerFormat
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPicker className="w-full max-w-[300px] rounded-md border bg-background p-4 shadow-sm">
      <ColorPickerSelection />
      <div className="flex items-center gap-4">
        <ColorPickerEyeDropper />
        <div className="w-full grid gap-1">
          <ColorPickerHue />
          <ColorPickerAlpha />
        </div>
      </div>
      <div className="flex items-center gap-2">
        <ColorPickerOutput />
        <ColorPickerFormat />
      </div>
    </ColorPicker>
  )
}
  
export default { Demo }