Customization

Mantine

Use the Mantine adapter when your application already uses Mantine and you want the builder controls to inherit that component language.

Available entrypoints

@vojtechportes/react-query-builder/mantine/v9 is the recommended entrypoint for new Mantine projects and the one used in the demo.
@vojtechportes/react-query-builder/mantine/v8 is available for applications that are still on Mantine 8.

Installing Mantine

Install the Mantine peer dependencies that match the adapter version you want to use. For new setups, prefer mantine/v9.

Mantine v9 peers

npm install @mantine/core@^9.0.0 @mantine/hooks@^9.0.0 react@^19.2.0 react-dom@^19.2.0

React version note

Mantine 9 requires React 19. The library website runs on React 19 so it can exercise mantine/v9 directly, while the library package itself keeps broad React 18 and 19 peer compatibility.

Stylesheet required

Import @mantine/core/styles.css once in your application entrypoint. Without it, Mantine components render without their expected styling.

Using Mantine v9

Mantine v9 adapter

import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import '@mantine/core/styles.css';
import '@vojtechportes/react-query-builder/styles.css';
import { MantineProvider } from '@mantine/core';
import { components } from '@vojtechportes/react-query-builder/mantine/v9';

export const MyMantineBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <MantineProvider>
      <Builder
        data={data}
        fields={fields}
        components={components}
        onChange={setData}
      />
    </MantineProvider>
  );
};

Supporting Mantine v8

If your application is still on Mantine 8, switch the import path to @vojtechportes/react-query-builder/mantine/v8.

Extending the Mantine adapter

Merging Mantine defaults

import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import '@mantine/core/styles.css';
import '@vojtechportes/react-query-builder/styles.css';
import { MantineProvider } from '@mantine/core';
import {
  createMantineComponents,
  components as mantineComponents,
} from '@vojtechportes/react-query-builder/mantine/v9';

const components = createMantineComponents(mantineComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

export const MyMantineBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <MantineProvider>
      <Builder
        data={data}
        fields={fields}
        components={components}
        onChange={setData}
      />
    </MantineProvider>
  );
};