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 }