Color Area

A draggable 2D gradient surface for picking two channels of a color (like saturation and lightness) at once, built on React Aria and styled with Tailwind.

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

import { ColorArea } from "@/components/ui/tailwind-colorarea";

export default function ColorAreaDemo() {
  return (
    <div className="flex items-center justify-center w-full h-screen">
      <ColorArea defaultValue="hsl(0, 100%, 50%)" />
    </div>
  );
}