React Aria

chroma-panel does not depend on React Aria, but the two compose cleanly. Use ColorInput on its own, or put the inline ChromaPanel inside a React Aria Popover or Dialog.

Install

npm install chroma-panel react-aria-components

You only need react-aria-components when your app already uses it or when you want React Aria to own the surrounding overlay.

Use a React Aria popover

Keep a single trigger and a single popover. DialogTrigger manages the open state, Popover handles placement, and ChromaPanel supplies the color wheel, sliders, palettes, and other color controls.

import { ChromaPanel } from "chroma-panel";
import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 
export function AriaColorPicker() {
  return (
    <DialogTrigger>
      <Button>Choose color</Button>
      <Popover placement="bottom start">
        <Dialog aria-label="Choose a color">
          <ChromaPanel defaultValue="#3366cc" showTitleBar={false} />
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}

Do not put ColorInput inside this popover. ColorInput has its own trigger and overlay, so nesting it would duplicate dismissal and focus behavior.

Accessibility responsibilities

React Aria owns the overlay semantics in this example. chroma-panel owns the picker controls inside it:

• Color axes are native range inputs with keyboard and screen-reader values.
• Swatches are buttons with accessible names and selected state.
• Mode tabs use a roving tab stop.
• Reduced motion and forced-colors settings are respected.

Give the React Aria Dialog a useful label, and keep labels on any custom trigger or form field. The accessibility guide lists the keyboard commands and state attributes exposed by the picker.

Use it without another popover

If you do not need React Aria to control the overlay, render ColorInput directly. It already handles focus return, Escape, outside clicks, and a mobile bottom sheet. See the ColorInput reference.