# Material UI

> Use the chroma-panel React color picker with Material UI, either as a standalone ColorInput or as an inline panel inside MUI Popover or Dialog.

Source: https://chroma-panel.jscrate.dev/react/integrations/material-ui
Last updated: 2026-09-21

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

```bash
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.

```tsx
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>
  );
}
```

## Put ChromaPanel inside MUI Popover

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

```tsx
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](https://chroma-panel.jscrate.dev/react/recipes/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](https://chroma-panel.jscrate.dev/react/handbook/theming) has the complete list.