Adapters

Adapters provide pre-mapped components objects for UI libraries so you do not need to implement every override in Components yourself.

Adapter guides

• MUI covers mui/v9, legacy mui/v7, install steps, and merge patterns.
• ANTD covers antd/v6, legacy antd/v5, install steps, and merge patterns.
• Fluent UI covers fluentui/v8, install steps, and merge patterns.
• Mantine covers mantine/v9, legacy mantine/v8, install steps, provider usage, and merge patterns.
• Bootstrap covers bootstrap/v5, stylesheet setup, and merge patterns.
• Radix covers radix/v1, stylesheet and provider setup, and merge patterns.

Stylesheet order

• Import any host-library stylesheet first, such as Bootstrap, Mantine, or Radix Themes.
• Import @vojtechportes/react-query-builder/styles.css once after the host stylesheet. MUI, ANTD, and Fluent UI do not require an additional static host stylesheet in these examples.
• Load application-owned overrides after both stylesheets. Host component theme APIs remain authoritative for adapter controls; query-builder variables customize the remaining structural surfaces.

Extending an adapter

• Start with the exported adapter components object.
• Override only the pieces you want to replace, such as a single select or button component.
• This keeps your app aligned with future adapter updates while still allowing local customization.

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import {
  createMuiComponents,
  components as muiComponents,
  MuiSelect,
} from '@vojtechportes/react-query-builder/mui/v9';

const components = createMuiComponents(muiComponents, {
  form: {
    Select: MuiSelect,
  },
});

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

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

Shared behavior

• Adapters are versioned entrypoints so the package can support multiple major UI-library versions in parallel.
• Each adapter exports a ready-to-pass components object plus a merge helper that preserves nested form overrides.
• Choose the adapter subpage that matches your UI library for exact installation commands and code samples.