An accessible, customizable color picker component that combines a color input field with a preset palette in a popover. Perfect for applications that need flexible color selection with both quick preset options and manual hex code entry.
1"use client";
2
3import ColorPickerInput from "@/components/color-picker-input";
4
5export function ColorPickerPreview() {
6return (
7 <div className="w-full max-w-sm mx-auto">
8 <ColorPickerInput
9 label="Choose a color"
10 defaultColor="#3B82F6"
11 />
12 </div>
13);
14}
15Run the following command to add the component:
npx cx add color-picker-input1"use client";
2
3import { useState } from "react";
4import ColorPickerInput from "@/components/color-picker-input";
5
6export function ColorPickerCustomPresets() {
7const [color, setColor] = useState('#FF6B35');
8
9const brandColors = [
10 '#FF6B35',
11 '#004E89',
12 '#F77F00',
13 '#FCBF49',
14 '#EAE2B7',
15 '#003049',
16 '#D62828',
17 '#F77F00',
18];
19
20return (
21 <div className="w-full max-w-sm">
22 <ColorPickerInput
23 value={color}
24 onChange={setColor}
25 label="Brand Colors"
26 presets={brandColors}
27 paletteTitle="Select a brand color"
28 />
29 </div>
30);
31}
321"use client";
2
3import { useState } from "react";
4import ColorPickerInput from "@/components/color-picker-input";
5
6export function ColorPickerNoLabel() {
7const [color, setColor] = useState('#8B5CF6');
8
9return (
10 <div className="w-full max-w-sm">
11 <ColorPickerInput
12 value={color}
13 onChange={setColor}
14 showLabel={false}
15 showHexCode={true}
16 />
17 </div>
18);
19}
20