Color

Color picker with hue slider and format selection.

import { Color } from "ui-lab-components";
import { useState } from "react";
 
export function Example() {
  const [color, setColor] = useState("#FF6B6B");
 
  return <Color value={color} onChange={setColor} />;
}

Color Trigger

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';
 
export const metadata = {
  title: 'Color Trigger',
  description: 'An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.',
};
 
export default function Example() {
  return (
    <div className="flex items-center justify-center">
      <Color defaultValue="#3b82f6" size="md">
        <Color.Trigger aria-label="Choose color" />
      </Color>
    </div>
  );
}

Controlled Color Trigger

A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.

Selected: #ef4444
"use client";
 
import { useState } from 'react';
import { Color } from 'ui-lab-components';
 
export const metadata = {
  title: 'Controlled Color Trigger',
  description: 'A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.',
};
 
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>
  );
}

Inline Color Area

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';
 
export const metadata = {
  title: 'Inline Color Area',
  description: 'Color.Area can be composed directly inside Color when the picker should stay visible.',
};
 
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>
  );
}

Standalone Color Slider

Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.

Hue 215 deg
Opacity 72%
"use client";
 
import { useState } from 'react';
import { Color } from 'ui-lab-components';
 
export const metadata = {
  title: 'Standalone Color Slider',
  description: 'Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.',
};
 
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="w-72 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>
  );
}
UI Lab