# Quick start


## Installation

```bash
npm install chroma-panel
```

There is no CSS import and no provider to set up.

## Anatomy

`ColorInput` renders a swatch button that opens the panel in a popover.

```tsx
import { ColorInput } from "chroma-panel";

<ColorInput defaultValue="#3366cc" />;
```

<ComponentPreview name="color-input-demo" />

## Controlled

Pass `value` and handle `onChange` to keep the color in your own state. Pass
`defaultValue` instead and the panel keeps it for you.

```tsx
import { useState } from "react";
import { ColorInput, type ColorChangeResult } from "chroma-panel";

export function BrandPicker() {
  const [color, setColor] = useState<string>("#3366cc");

  const handleChange = (result: ColorChangeResult): void => {
    setColor(result.hex);
  };

  return <ColorInput value={color} onChange={handleChange} />;
}
```

`onChange` fires continuously while you drag. `onChangeComplete` fires once when
you let go — use that one for saving, undo entries and network calls.

## Inline panel

`ChromaPanel` is the same panel without the popover, for when you want it on the
page.

<ComponentPreview name="chroma-panel-demo" />

## Smaller bundle

Importing `chroma-panel` registers all five modes. If you only need one or two,
import the shell and add the modes yourself.

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";

<ChromaPanel modes={["wheel"]} />;
```

That is 14.1 kB instead of 22.2 kB. Every mode has its own entry point — see
[entry points](/react/utils/entry-points).

<ComponentPreview name="chroma-panel-wheel-demo" />

## Next steps

- [Theming](/react/handbook/theming) — change how the panel looks
- [Controlled and uncontrolled](/react/handbook/controlled) — which props you own
- [ColorInput](/react/components/color-input) — the full prop reference