Customization

ANTD

ANTD v6 adapter usage

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

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

ANTD v5 import

import { components } from '@vojtechportes/react-query-builder/antd/v5';

createAntdComponents

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

Available entrypoints

@vojtechportes/react-query-builder/antd/v6 Recommended Ant Design adapter for new projects.
@vojtechportes/react-query-builder/antd/v5 Ant Design adapter for applications still on Ant Design 5.

Exports

components Ready-made Ant Design component mapping for Builder.
Individual mapped components Named exports such as AntdSelect, AntdInput, and related ANTD-backed controls for partial overrides.
createAntdComponents Merges ANTD defaults with local overrides while preserving nested form keys.

Documentation

ANTD adapter guide.