Components
Loading preview...
A @shadcn-ui compatible color picker using @uiw/react-color
@uplusion23
npx shadcn@latest add https://21st.dev/r/uplusion23/color-picker"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>{</span>
<span>
"hex": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.hex}
</span>
"
</span>
<span> "hsl": {</span>
<span>
"h": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.hsl.h}
</span>
",
</span>
<span>
"s": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.hsl.s}
</span>
",
</span>
<span>
"l": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.hsl.l}
</span>
",
</span>
<span>
"a": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.hsl.a}
</span>
"
</span>
<span> },</span>
<span> "rgb": {</span>
<span>
"r": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.rgb.r}
</span>
",
</span>
<span>
"g": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.rgb.g}
</span>
",
</span>
<span>
"b": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.rgb.b}
</span>
",
</span>
<span>
"a": "
<span className="bg-neutral-700 px-0.5 text-neutral-50">
{color.rgb.a}
</span>
"
</span>
<span> },</span>
<span>}</span>
</code>
</pre>
);
}
export { ColorPickerDev };