Color Picker

Forms 107

About

A @shadcn-ui compatible color picker using @uiw/react-color

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 } from "@/components/ui/color-picker"
import { Button } from "@/components/ui/button"
import { ChevronDownIcon } from "lucide-react"

function ColorPickerDemo() {
	return (
		<ColorPicker value="#5a289e">
			<Button variant="outline" className="flex items-center gap-2">Open Color Picker <ChevronDownIcon size={16} /></Button>
		</ColorPicker>
	)
}

export { ColorPickerDemo }