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} />;
}

Basic Color

A simple color component with default configuration showing hex format.

Selected color: #FF6B6B

import React, { useState } from 'react';
import { Color } from 'ui-lab-components';
 
export default function Example() {
  const [color, setColor] = useState('#FF6B6B');
 
  return (
    <div className="p-4 space-y-4">
      <div>
        <p className="text-sm text-foreground-300 mb-3">Selected code className="text-accent-500 font-mono">{color}</code></p>
        <Color
          value={color}
          onChange={setColor}
          format="hex"
          defaultValue="#FF6B6B"
        />
      </div>
    </div>
  );
}

Opacity Slider

Color picker with opacity/alpha slider enabled for transparent color selection.

Selected color: rgba(106, 90, 205, 0.75)

import React, { useState } from 'react';
import { Color } from 'ui-lab-components';
 
export default function Example() {
  const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');
 
  return (
    <div className="p-4 space-y-4">
      <div>
        <p className="text-sm text-foreground-300 mb-3">Selected code className="text-accent-500 font-mono">{color}</code></p>
        <Color
          value={color}
          onChange={setColor}
          showOpacity
          format="rgb"
          defaultValue="rgba(106, 90, 205, 0.75)"
        />
      </div>
    </div>
  );
}
UI Lab