@neo4j-ndl/react/skills/ndl-react/components/color-picker.md

React implementation of Neo4j Design System

# ColorPicker

Import: `import { ColorPicker } from '@neo4j-ndl/react'`

## Props

### ColorPicker

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `color` | `` HsvaColor \| RgbaColor \| `#${string}` `` | ✅ |  | The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. |
| `onChange` | `` (newColor: { hex: `#${string}`; rgb: RgbaColor; hsva: HsvaColor; }) => void `` | ✅ |  | Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. |
| `shouldShowEyeDropper` | `boolean` |  | `true` | Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. |
| `swatches` | `` (HsvaColor \| RgbaColor \| `#${string}`)[] `` |  | `Object.values(tokens.graph).filter(validHex)` | Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. |

By default the `swatches` prop is set to the available graph colors (`tokens.graph`) from `@neo4j-ndl/base`.

Where `HsvaColor`, `RgbaColor`, and `HexColor` types are from `@uiw/react-color`, and represent different color formats:

- `HexColor`: A string in the format `#RRGGBB` (e.g., `#ff0000`).
- `RgbaColor`: An object with numeric properties `{ r, g, b, a }` for red, green, blue (0–255), and alpha (0–1).
- `HsvaColor`: An object with numeric properties `{ h, s, v, a }` for hue (0–360), saturation (0–100), value (0–100), and alpha (0–1).

Visit [react-color](https://uiwjs.github.io/react-color/#/) for more information.

## Examples

### Default

```tsx
import { useState } from 'react';

import { ColorPicker } from '../ColorPicker';

const Component = () => {
  const [color, setColor] = useState({
    a: 1,
    b: 0,
    g: 0,
    r: 0,
  });

  return (
    <ColorPicker
      color={color}
      onChange={(newColor) => setColor(newColor.rgb)}
    />
  );
};

export default Component;
```

### Custom Swatches

```tsx
import { useState } from 'react';

import { ColorPicker } from '../ColorPicker';

const Component = () => {
  const [color, setColor] = useState({
    a: 1,
    b: 0,
    g: 0,
    r: 0,
  });

  return (
    <ColorPicker
      color={color}
      onChange={(newColor) => setColor(newColor.rgb)}
      swatches={[
        {
          a: 1,
          b: 0,
          g: 0,
          r: 0,
        },
        {
          a: 1,
          b: 255,
          g: 0,
          r: 0,
        },
        {
          a: 1,
          b: 0,
          g: 255,
          r: 0,
        },
        {
          a: 1,
          b: 0,
          g: 0,
          r: 255,
        },
      ]}
    />
  );
};

export default Component;
```

### Without Eyedropper

```tsx
import { useState } from 'react';

import { ColorPicker } from '../ColorPicker';

const Component = () => {
  const [color, setColor] = useState({
    a: 1,
    b: 0,
    g: 0,
    r: 0,
  });

  return (
    <ColorPicker
      color={color}
      onChange={(newColor) => setColor(newColor.rgb)}
      shouldShowEyeDropper={false}
    />
  );
};

export default Component;
```