Color Picker

Component 39

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

"use client";

import { ColorPicker, type ColorValue } from "@/components/ui/color-picker"
import { Button } from "@/components/ui/button";
import { ChevronDownIcon } from "lucide-react";
import { useState } from "react";

function ColorPickerDev() {
	const [color, setColor] = useState<ColorValue>({
		hex: "#A35fFF",
		hsl: { h: 265.5, s: 265.5, l: 265.5, a: 0 },
		rgb: { r: 265.5, g: 265.5, b: 265.5, a: 0 },
	});

	return (
		<div className="flex flex-col items-start gap-4">
			<CodePreview color={color} />
			<ColorPicker
				value={color.hex}
				swatches={["#AEDEAE", "#FFD3B6", "#FFB6B9", "#FFC0CB", "#FFD1DC"]}
				onValueChange={setColor}
			>
				<Button variant="outline" className="flex items-center gap-2">
					Open Color Picker <ChevronDownIcon size={16} />
				</Button>
			</ColorPicker>
		</div>
	);
}

function CodePreview({ color }: { color: ColorValue }) {
	return (
		<pre className="w-[400px] rounded-md bg-neutral-800 py-4">
			<code className="text-neutral-400 [&>span]:block [&>span]:px-4">
				<span>&#123;</span>
				<span>
					&nbsp;&nbsp;"hex": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.hex}
					</span>
					"
				</span>
				<span>&nbsp;&nbsp;"hsl": &#123;</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"h": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.hsl.h}
					</span>
					",
				</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"s": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.hsl.s}
					</span>
					",
				</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"l": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.hsl.l}
					</span>
					",
				</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"a": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.hsl.a}
					</span>
					"
				</span>
				<span>&nbsp;&nbsp;&#125;,</span>
				<span>&nbsp;&nbsp;"rgb": &#123;</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"r": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.rgb.r}
					</span>
					",
				</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"g": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.rgb.g}
					</span>
					",
				</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"b": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.rgb.b}
					</span>
					",
				</span>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;"a": "
					<span className="bg-neutral-700 px-0.5 text-neutral-50">
						{color.rgb.a}
					</span>
					"
				</span>
				<span>&nbsp;&nbsp;&#125;,</span>
				<span>&#125;</span>
			</code>
		</pre>
	);
}

export { ColorPickerDev };

Color Picker

Code

Dependencies

Explore more