Customization

Radix

Radix v1 adapter usage

import '@radix-ui/themes/styles.css';
import '@vojtechportes/react-query-builder/styles.css';
import { Theme } from '@radix-ui/themes';
import { components } from '@vojtechportes/react-query-builder/radix/v1';

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

Radix v1 import

import { components } from '@vojtechportes/react-query-builder/radix/v1';

createRadixComponents

import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import '@radix-ui/themes/styles.css';
import '@vojtechportes/react-query-builder/styles.css';
import { Theme } from '@radix-ui/themes';
import {
  createRadixComponents,
  components as radixComponents,
} from '@vojtechportes/react-query-builder/radix/v1';

const components = createRadixComponents(radixComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

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

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

Available entrypoint

@vojtechportes/react-query-builder/radix/v1 Radix Themes adapter for applications on @radix-ui/themes 1.x.

Exports

components Ready-made Radix Themes component mapping for Builder.
Individual mapped components Named exports such as RadixSelect, RadixInput, and related Radix-backed controls for partial overrides.
createRadixComponents Merges Radix defaults with local overrides while preserving nested form keys.
Theme Radix-backed builders should be rendered within Radix Themes' provider so the host app theme and tokens are available.
@radix-ui/themes/styles.css Import the Radix Themes stylesheet once in your application entrypoint so the adapter controls render correctly.

Documentation

Radix adapter guide.