React color picker for Material UI

Use ColorInput when the picker can manage its own popover. Use ChromaPanel inside an MUI Popover or Dialog when Material UI should control the overlay, spacing, and open state.

Install

npm install chroma-panel

No Material UI adapter is required. chroma-panel keeps MUI out of its runtime, so your app uses the version it already has.

Use ColorInput

ColorInput works as a standalone field next to MUI controls. Keep its value in the same state you use for the rest of the form.

import { useState } from "react";
import { ColorInput } from "chroma-panel";
import { FormControl, FormLabel, Stack } from "@mui/material";
 
export function AccentColorField() {
  const [color, setColor] = useState("#1976d2");
 
  return (
    <FormControl>
      <FormLabel>Accent color</FormLabel>
      <Stack direction="row" alignItems="center" spacing={1}>
        <ColorInput
          value={color}
          onChange={(next) => setColor(next.hex)}
          aria-label="Accent color"
        />
        <code>{color}</code>
      </Stack>
    </FormControl>
  );
}

Use the inline component so there is only one popover and one focus manager.

import { useState, type MouseEvent } from "react";
import { ChromaPanel } from "chroma-panel";
import { Button, Popover } from "@mui/material";
 
export function MuiColorPicker() {
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
  const [color, setColor] = useState("#1976d2");
  const open = Boolean(anchor);
 
  return (
    <>
      <Button
        variant="outlined"
        aria-haspopup="dialog"
        aria-expanded={open}
        onClick={(event: MouseEvent<HTMLButtonElement>) =>
          setAnchor(event.currentTarget)
        }
      >
        Choose color
      </Button>
 
      <Popover
        open={open}
        anchorEl={anchor}
        onClose={() => setAnchor(null)}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        slotProps={{
          paper: {
            sx: { mt: 1, overflow: "visible", bgcolor: "transparent" },
          },
        }}
      >
        <ChromaPanel
          value={color}
          onChange={(next) => setColor(next.hex)}
          showTitleBar={false}
        />
      </Popover>
    </>
  );
}

MUI Popover handles outside clicks, focus, and scroll locking. ChromaPanel only handles color interaction in this setup. Use the same approach with MUI Dialog, Drawer, or Menu; for modal details, read picker in a modal.

Match an MUI theme

Set the panel's CSS variables from your theme or a wrapper class. Start with --cp-accent, --cp-focus, --cp-surface, and --cp-radius-lg. The theming guide has the complete list.

Material UI

Install

Use ColorInput

Put ChromaPanel inside MUI Popover

Match an MUI theme