Customization

Mantine

Mantine v9 adapter usage

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';

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

Mantine v8 import

import { components } from '@vojtechportes/react-query-builder/mantine/v8';

createMantineComponents

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
        fields={fields}
        data={data}
        components={components}
        onChange={setData}
      />
    </MantineProvider>
  );
};

Available entrypoints

@vojtechportes/react-query-builder/mantine/v9 Recommended Mantine adapter for new projects on Mantine 9.
@vojtechportes/react-query-builder/mantine/v8 Mantine adapter for applications still on Mantine 8.

Exports

components Ready-made Mantine component mapping for Builder.
Individual mapped components Named exports such as MantineSelect, MantineInput, and related Mantine-backed controls for partial overrides.
createMantineComponents Merges Mantine defaults with local overrides while preserving nested form keys.
MantineProvider Mantine-backed builders should be rendered within Mantine's provider so the host app theme and styles are available.
@mantine/core/styles.css Import Mantine's base stylesheet once in your application entrypoint so Mantine controls render correctly.

Documentation

Mantine adapter guide.