Color picker with a canvas, sliders, and format input.
import { Color } from 'ui-lab-components/color';import { Color } from 'ui-lab-components/color';
export default function Example() {
return <Color defaultValue="#FF6B6B" />;
}
An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.
"use client";
import { Color } from 'ui-lab-components/color';
export default function Example() {
return (
<div className="flex items-center justify-center">
<Color value="#3b82f6" size="md">
<Color.Trigger aria-label="Choose color" />
</Color>
</div>
);
}
A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.
"use client";
import { useState } from 'react';
import { Color } from 'ui-lab-components/color';
export default function Example() {
const [color, setColor] = useState('#ef4444');
return (
<div className="flex flex-col gap-4 items-center">
<Color
value={color}
onChange={setColor}
showOpacity={true}
size="md"
>
<Color.Trigger aria-label="Choose accent color" />
</Color>
<div className="text-sm text-foreground-400">
Selected: {color}
</div>
</div>
);
}
Color.Area can be composed directly inside Color when the picker should stay visible.
"use client";
import { useState } from 'react';
import { Color } from 'ui-lab-components/color';
export default function Example() {
const [color, setColor] = useState('#8b5cf6');
return (
<div className="flex flex-col gap-4 items-center">
<Color
value={color}
onChange={setColor}
showPreview={true}
format="hex"
size="md"
>
<Color.Area />
</Color>
</div>
);
}
Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.
"use client";
import { useState } from 'react';
import { Color } from 'ui-lab-components/color';
export default function Example() {
const [hue, setHue] = useState(215);
const [opacity, setOpacity] = useState(0.72);
const baseColor = `hsl(${hue} 100% 50%)`;
const previewColor = `hsl(${hue} 100% 50% / ${opacity})`;
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<div
className="h-10 w-10 rounded-sm border border-background-700"
style={{ backgroundColor: previewColor }}
aria-hidden="true"
/>
<div className="min-w-0 flex-1 text-sm text-foreground-300">
<div>Hue {Math.round(hue)} deg</div>
<div>Opacity {Math.round(opacity * 100)}%</div>
</div>
</div>
<Color.Slider
aria-label="Accent hue"
value={hue}
onChange={setHue}
/>
<Color.Slider
type="opacity"
aria-label="Accent opacity"
value={opacity}
onChange={setOpacity}
color={baseColor}
/>
</div>
);
}
Color.Canvas renders just the saturation/brightness area on its own, without sliders, input, or recent colors.
"use client";
import { useState } from 'react';
import { Color } from 'ui-lab-components/color';
export default function Example() {
const [color, setColor] = useState('#3b82f6');
return (
<div className="flex items-center justify-center">
<Color value={color} onChange={setColor} size="md">
<Color.Canvas />
</Color>
</div>
);
}