Customization

ANTD

Use the ANTD adapter when your application uses Ant Design and you want the builder controls to match the surrounding system components.

Available entrypoints

@vojtechportes/react-query-builder/antd/v6 is the recommended entrypoint for new Ant Design projects and is available in the demo.
@vojtechportes/react-query-builder/antd/v5 is available for applications that are still on Ant Design 5.

Installing ANTD

Install the Ant Design peer dependencies that match the adapter version you want to use. For new setups, prefer antd/v6.

ANTD v6 peers

npm install antd@^6.0.0 @ant-design/icons@^6.0.0

Using ANTD v6

ANTD v6 adapter

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import { components } from '@vojtechportes/react-query-builder/antd/v6';

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

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

Supporting ANTD v5

If your application is still on Ant Design 5, switch the import path to @vojtechportes/react-query-builder/antd/v5.

Extending the ANTD adapter

Merging ANTD defaults

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import {
  createAntdComponents,
  components as antdComponents,
} from '@vojtechportes/react-query-builder/antd/v6';

const components = createAntdComponents(antdComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

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

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