Customization

Radix

Use the Radix adapter when your application uses Radix Themes and you want the builder controls to align with that design system.

Available entrypoint

@vojtechportes/react-query-builder/radix/v1 targets @radix-ui/themes 1.x and is available in the demo.

Installing Radix Themes

Install the Radix Themes peer dependency and the Radix icons package before using the adapter.

Radix Themes v1 peer

npm install @radix-ui/themes@^1.1.2 @radix-ui/react-icons@^1.3.2

Icons package required

The Radix adapter renders icons from @radix-ui/react-icons, so applications using the adapter should install that package alongside @radix-ui/themes.

Stylesheet required

Import @radix-ui/themes/styles.css once in your application entrypoint so Radix Themes components render with the expected styling.

Provider required

Render the builder inside Theme so Radix Themes tokens and component styles are available to the adapter.

Using Radix v1

Radix v1 adapter

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 { components } from '@vojtechportes/react-query-builder/radix/v1';

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

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

Extending the Radix adapter

Merging Radix defaults

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