Color Picker

Pro

import { useState } from 'react';
import { ColorPicker } from '@versaui/ui/components/ColorPicker';

function Example() {
  const [color, setColor] = useState('#9423D9');

  return (
    <ColorPicker
      value={color}
      onValueChange={setColor}
      format="Hex"
      opacitySlider={true}
    />
  );
}

import { useState } from 'react';
import { ColorInput } from '@versaui/ui/components/ColorPicker';

function InputExample() {
  const [hex, setHex] = useState('9423D9');

  return (
    <ColorInput
      mode="Hex"
      hexValue={hex}
      onHexChange={setHex}
      colorString={`#${hex}`}
      colorPreview={true}
      copyColor={true}
      size="Default"
    />
  );
}

import { useState } from 'react';
import { ColorSlider } from '@versaui/ui/components/ColorPicker';

function SlidersExample() {
  const [hue, setHue] = useState(277);
  const [opacity, setOpacity] = useState(0.85);

  return (
    <div className="space-y-4">
      <ColorSlider type="Hue" value={hue} onChange={setHue} />
      <ColorSlider type="Opacity" value={opacity} color="rgb(148, 35, 217)" onChange={setOpacity} />
    </div>
  );
}

import { ColorSwatch, ColorSwatchGroup } from '@versaui/ui/components/ColorPicker';

function SwatchesExample() {
  return (
    <ColorSwatchGroup
      title="Presets"
      selectedColor="#615FFF"
      onSelectColor={(color) => console.log(color)}
    />
  );
}