diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 6a555e4f0600f..b48c02ad0e491 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -717,6 +717,7 @@ packages/react/kibana_context/root @elastic/appex-sharedux
 packages/react/kibana_context/styled @elastic/appex-sharedux
 packages/react/kibana_context/theme @elastic/appex-sharedux
 packages/react/kibana_mount @elastic/appex-sharedux
+packages/kbn-react-mute-legacy-root-warning @elastic/appex-sharedux
 packages/kbn-recently-accessed @elastic/appex-sharedux
 x-pack/plugins/remote_clusters @elastic/kibana-management
 test/plugin_functional/plugins/rendering_plugin @elastic/kibana-core
diff --git a/kbn_pm/src/commands/bootstrap/bootstrap_command.mjs b/kbn_pm/src/commands/bootstrap/bootstrap_command.mjs
index bafab23da4e34..4983257bba36f 100644
--- a/kbn_pm/src/commands/bootstrap/bootstrap_command.mjs
+++ b/kbn_pm/src/commands/bootstrap/bootstrap_command.mjs
@@ -54,6 +54,7 @@ export const command = {
     const offline = args.getBooleanValue('offline') ?? false;
     const validate = args.getBooleanValue('validate') ?? true;
     const quiet = args.getBooleanValue('quiet') ?? false;
+    const reactVersion = process.env.REACT_18 ? '18' : '17';
     const vscodeConfig =
       args.getBooleanValue('vscode') ?? (process.env.KBN_BOOTSTRAP_NO_VSCODE ? false : true);
 
@@ -114,7 +115,7 @@ export const command = {
     }
 
     await time('pre-build webpack bundles for packages', async () => {
-      await Bazel.buildWebpackBundles(log, { offline, quiet });
+      await Bazel.buildWebpackBundles(log, { offline, quiet, reactVersion });
     });
 
     await Promise.all([
diff --git a/kbn_pm/src/lib/bazel.mjs b/kbn_pm/src/lib/bazel.mjs
index 2eb221e21526e..53a1c87f164c2 100644
--- a/kbn_pm/src/lib/bazel.mjs
+++ b/kbn_pm/src/lib/bazel.mjs
@@ -58,15 +58,19 @@ function throwBazelError(log, name, code, output) {
 /**
  * @param {import('./log.mjs').Log} log
  * @param {string[]} inputArgs
- * @param {{ quiet?: boolean; offline?: boolean, env?: Record<string, string> } | undefined} opts
+ * @param {{ quiet?: boolean; offline?: boolean, reactVersion?: string, env?: Record<string, string> } | undefined} opts
  */
 async function runBazel(log, inputArgs, opts = undefined) {
   const bazel = (await getBazelRunner()).runBazel;
 
-  const args = [...inputArgs, ...(opts?.offline ? ['--config=offline'] : [])];
+  const args = [
+    ...inputArgs,
+    `--define=REACT_18=${opts?.reactVersion === '18' ? 'true' : 'false'}`,
+    ...(opts?.offline ? ['--config=offline'] : []),
+  ];
   log.debug(`> bazel ${args.join(' ')}`);
   await bazel(args, {
-    env: opts?.env,
+    env: { ...opts?.env, REACT_18: opts?.reactVersion === '18' ? 'true' : 'false' },
     cwd: REPO_ROOT,
     quiet: opts?.quiet,
     logPrefix: Color.info('[bazel]'),
@@ -161,12 +165,13 @@ export async function installYarnDeps(log, opts = undefined) {
 
 /**
  * @param {import('./log.mjs').Log} log
- * @param {{ offline?: boolean, quiet?: boolean } | undefined} opts
+ * @param {{ offline?: boolean, quiet?: boolean, reactVersion?: string } | undefined} opts
  */
 export async function buildWebpackBundles(log, opts = undefined) {
   await runBazel(log, ['build', ...BAZEL_TARGETS, '--show_result=1'], {
     offline: opts?.offline,
     quiet: opts?.quiet,
+    reactVersion: opts?.reactVersion,
   });
 
   log.success('shared bundles built');
diff --git a/package.json b/package.json
index c52eaa5dd721c..5660e14f9a57c 100644
--- a/package.json
+++ b/package.json
@@ -736,6 +736,7 @@
     "@kbn/react-kibana-context-styled": "link:packages/react/kibana_context/styled",
     "@kbn/react-kibana-context-theme": "link:packages/react/kibana_context/theme",
     "@kbn/react-kibana-mount": "link:packages/react/kibana_mount",
+    "@kbn/react-mute-legacy-root-warning": "link:packages/kbn-react-mute-legacy-root-warning",
     "@kbn/recently-accessed": "link:packages/kbn-recently-accessed",
     "@kbn/remote-clusters-plugin": "link:x-pack/plugins/remote_clusters",
     "@kbn/rendering-plugin": "link:test/plugin_functional/plugins/rendering_plugin",
@@ -1226,8 +1227,10 @@
     "re-resizable": "^6.9.9",
     "re2js": "0.4.3",
     "react": "^17.0.2",
+    "react-18": "npm:react@~18.2.0",
     "react-diff-view": "^3.2.1",
     "react-dom": "^17.0.2",
+    "react-dom-18": "npm:react-dom@~18.2.0",
     "react-dropzone": "^4.2.9",
     "react-fast-compare": "^2.0.4",
     "react-grid-layout": "^1.3.4",
diff --git a/packages/core/root/core-root-browser-internal/src/core_system.ts b/packages/core/root/core-root-browser-internal/src/core_system.ts
index 38532948ea505..c9ad8194e4b64 100644
--- a/packages/core/root/core-root-browser-internal/src/core_system.ts
+++ b/packages/core/root/core-root-browser-internal/src/core_system.ts
@@ -40,6 +40,8 @@ import { PluginsService } from '@kbn/core-plugins-browser-internal';
 import { CustomBrandingService } from '@kbn/core-custom-branding-browser-internal';
 import { SecurityService } from '@kbn/core-security-browser-internal';
 import { UserProfileService } from '@kbn/core-user-profile-browser-internal';
+import { version as REACT_VERSION } from 'react';
+import { muteLegacyRootWarning } from '@kbn/react-mute-legacy-root-warning';
 import { KBN_LOAD_MARKS } from './events';
 import { fetchOptionalMemoryInfo } from './fetch_optional_memory_info';
 import {
@@ -128,6 +130,15 @@ export class CoreSystem {
       logger: this.loggingSystem.asLoggerFactory(),
     };
 
+    if (this.coreContext.env.mode.dev && REACT_VERSION.startsWith('18.')) {
+      muteLegacyRootWarning();
+      this.coreContext.logger
+        .get('core-system')
+        .info(
+          `Kibana is built with and running React@${REACT_VERSION}, muting legacy root warning.`
+        );
+    }
+
     this.i18n = new I18nService();
     this.analytics = new AnalyticsService(this.coreContext);
     this.fatalErrors = new FatalErrorsService(rootDomElement, () => {
diff --git a/packages/core/root/core-root-browser-internal/tsconfig.json b/packages/core/root/core-root-browser-internal/tsconfig.json
index a44a523d05744..159275fb15012 100644
--- a/packages/core/root/core-root-browser-internal/tsconfig.json
+++ b/packages/core/root/core-root-browser-internal/tsconfig.json
@@ -68,6 +68,7 @@
     "@kbn/core-user-profile-browser-internal",
     "@kbn/core-injected-metadata-common-internal",
     "@kbn/core-feature-flags-browser-internal",
+    "@kbn/react-mute-legacy-root-warning",
   ],
   "exclude": [
     "target/**/*",
diff --git a/packages/kbn-optimizer/src/common/worker_config.ts b/packages/kbn-optimizer/src/common/worker_config.ts
index 8881d2354740b..fbbe30e261609 100644
--- a/packages/kbn-optimizer/src/common/worker_config.ts
+++ b/packages/kbn-optimizer/src/common/worker_config.ts
@@ -21,6 +21,7 @@ export interface WorkerConfig {
   readonly profileWebpack: boolean;
   readonly browserslistEnv: string;
   readonly optimizerCacheKey: unknown;
+  readonly reactVersion: string;
 }
 
 export type CacheableWorkerConfig = Omit<WorkerConfig, 'watch' | 'profileWebpack' | 'cache'>;
@@ -72,6 +73,11 @@ export function parseWorkerConfig(json: string): WorkerConfig {
       throw new Error('`browserslistEnv` must be a string');
     }
 
+    const reactVersion = parsed.reactVersion;
+    if (typeof reactVersion !== 'string') {
+      throw new Error('`reactVersion` must be a string');
+    }
+
     const themes = parseThemeTags(parsed.themeTags);
 
     return {
@@ -83,6 +89,7 @@ export function parseWorkerConfig(json: string): WorkerConfig {
       optimizerCacheKey,
       browserslistEnv,
       themeTags: themes,
+      reactVersion,
     };
   } catch (error) {
     throw new Error(`unable to parse worker config: ${error.message}`);
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts b/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
index 6d520836ac4b2..38b40409bf779 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
@@ -88,6 +88,7 @@ describe('getOptimizerCacheKey()', () => {
           "browserslistEnv": "dev",
           "dist": false,
           "optimizerCacheKey": "♻",
+          "reactVersion": "17",
           "repoRoot": <absolute path>,
           "themeTags": Array [
             "v8dark",
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
index a3329dcc3d57f..9766ec1469199 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
@@ -98,6 +98,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -126,6 +127,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -154,6 +156,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -181,6 +184,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -209,6 +213,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -237,6 +242,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -265,6 +271,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -294,6 +301,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -323,6 +331,7 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
+        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -385,6 +394,7 @@ describe('OptimizerConfig::create()', () => {
         focus: [],
         includeCoreBundle: false,
         pluginSelector: Symbol('plugin selector'),
+        reactVersion: 17,
       })
     );
   });
@@ -408,6 +418,7 @@ describe('OptimizerConfig::create()', () => {
           Symbol(plugin2),
         ],
         "profileWebpack": Symbol(parsed profile webpack),
+        "reactVersion": 17,
         "repoRoot": Symbol(parsed repo root),
         "themeTags": Symbol(theme tags),
         "watch": Symbol(parsed watch),
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
index b09650c0708da..1f290e2bee489 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
@@ -126,6 +126,7 @@ export interface ParsedOptions {
   includeCoreBundle: boolean;
   themeTags: ThemeTags;
   pluginSelector: PluginSelector;
+  reactVersion: string;
 }
 
 export class OptimizerConfig {
@@ -140,6 +141,7 @@ export class OptimizerConfig {
     const includeCoreBundle = !!options.includeCoreBundle;
     const filters = options.filter || [];
     const focus = options.focus || [];
+    const reactVersion = process.env.REACT_18 ? '18' : '17';
 
     const repoRoot = options.repoRoot;
     if (!Path.isAbsolute(repoRoot)) {
@@ -184,6 +186,7 @@ export class OptimizerConfig {
       outputRoot,
       maxWorkerCount,
       profileWebpack,
+      reactVersion,
       cache,
       filters,
       focus,
@@ -241,7 +244,8 @@ export class OptimizerConfig {
       options.maxWorkerCount,
       options.dist,
       options.profileWebpack,
-      options.themeTags
+      options.themeTags,
+      options.reactVersion
     );
   }
 
@@ -256,7 +260,8 @@ export class OptimizerConfig {
     public readonly maxWorkerCount: number,
     public readonly dist: boolean,
     public readonly profileWebpack: boolean,
-    public readonly themeTags: ThemeTags
+    public readonly themeTags: ThemeTags,
+    public readonly reactVersion: string
   ) {}
 
   getWorkerConfig(optimizerCacheKey: unknown): WorkerConfig {
@@ -269,6 +274,7 @@ export class OptimizerConfig {
       optimizerCacheKey,
       themeTags: this.themeTags,
       browserslistEnv: this.dist ? 'production' : process.env.BROWSERSLIST_ENV || 'dev',
+      reactVersion: this.reactVersion,
     };
   }
 
diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
index b5da9566878e1..98549d7ec745a 100644
--- a/packages/kbn-optimizer/src/worker/webpack.config.ts
+++ b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -310,6 +310,10 @@ export function getWebpackConfig(
           'src/core/public/styles/core_app/images'
         ),
         vega: Path.resolve(worker.repoRoot, 'node_modules/vega/build-es5/vega.js'),
+        'react-dom$':
+          worker.reactVersion === '18' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+        'scheduler/tracing': 'scheduler/tracing-profiling',
+        react: worker.reactVersion === '18' ? 'react-18' : 'react',
       },
     },
 
diff --git a/packages/kbn-react-mute-legacy-root-warning/README.md b/packages/kbn-react-mute-legacy-root-warning/README.md
new file mode 100644
index 0000000000000..4e1ac473e023c
--- /dev/null
+++ b/packages/kbn-react-mute-legacy-root-warning/README.md
@@ -0,0 +1,5 @@
+# @kbn/react-mute-legacy-root-warning
+
+After we upgrade to React 18, we will see a warning in the console that we are using the legacy ReactDOM.render API.
+This warning is expected as we will be in the process of migrating to the new createRoot API.
+However, it is very noisy and we want to mute it for now.
diff --git a/packages/kbn-react-mute-legacy-root-warning/index.ts b/packages/kbn-react-mute-legacy-root-warning/index.ts
new file mode 100644
index 0000000000000..d77c6f50568a1
--- /dev/null
+++ b/packages/kbn-react-mute-legacy-root-warning/index.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/* eslint-disable no-console */
+const originalConsoleError = console.error;
+
+/**
+ * After we upgrade to React 18, we will see a warning in the console that we are using the legacy ReactDOM.render API.
+ * This warning is expected as we are in the process of migrating to the new createRoot API.
+ * However, it is very noisy and we want to mute it for now.
+ */
+export function muteLegacyRootWarning() {
+  console.error = (message, ...args) => {
+    if (
+      typeof message === 'string' &&
+      message.includes(
+        "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17."
+      )
+    ) {
+      return;
+    }
+
+    originalConsoleError.call(console, message, ...args);
+  };
+}
diff --git a/packages/kbn-react-mute-legacy-root-warning/jest.config.js b/packages/kbn-react-mute-legacy-root-warning/jest.config.js
new file mode 100644
index 0000000000000..00d62deb5770f
--- /dev/null
+++ b/packages/kbn-react-mute-legacy-root-warning/jest.config.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-react-mute-legacy-root-warning'],
+};
diff --git a/packages/kbn-react-mute-legacy-root-warning/kibana.jsonc b/packages/kbn-react-mute-legacy-root-warning/kibana.jsonc
new file mode 100644
index 0000000000000..82f28f5477d39
--- /dev/null
+++ b/packages/kbn-react-mute-legacy-root-warning/kibana.jsonc
@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/react-mute-legacy-root-warning",
+  "owner": "@elastic/appex-sharedux"
+}
diff --git a/packages/kbn-react-mute-legacy-root-warning/package.json b/packages/kbn-react-mute-legacy-root-warning/package.json
new file mode 100644
index 0000000000000..24ac77215a69d
--- /dev/null
+++ b/packages/kbn-react-mute-legacy-root-warning/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/react-mute-legacy-root-warning",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}
\ No newline at end of file
diff --git a/packages/kbn-react-mute-legacy-root-warning/tsconfig.json b/packages/kbn-react-mute-legacy-root-warning/tsconfig.json
new file mode 100644
index 0000000000000..2f9ddddbeea23
--- /dev/null
+++ b/packages/kbn-react-mute-legacy-root-warning/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": []
+}
diff --git a/packages/kbn-test/src/jest/resolver.js b/packages/kbn-test/src/jest/resolver.js
index a3303ecf17e45..8698e72a2e917 100644
--- a/packages/kbn-test/src/jest/resolver.js
+++ b/packages/kbn-test/src/jest/resolver.js
@@ -30,6 +30,8 @@ const STATIC_FILE_EXT =
     .split('|')
     .map((e) => `.${e}`);
 
+const IS_REACT_18 = process.env.REACT_18 === 'true';
+
 /**
  * @param {string} request
  * @param {import('resolve').SyncOpts} options
@@ -69,6 +71,18 @@ module.exports = (request, options) => {
     return APM_AGENT_MOCK;
   }
 
+  // routes tests to the react-18 alias package
+  if (IS_REACT_18) {
+    // routes tests to the react-18 alias package
+    if (/^react?(\/[\s\S]*)?$/.test(request)) {
+      return module.exports(request.replace('react', 'react-18'), options);
+    }
+
+    if (/^react-dom?(\/[\s\S]*)?$/.test(request)) {
+      return module.exports(request.replace('react-dom', 'react-dom-18'), options);
+    }
+  }
+
   const reqExt = Path.extname(request);
   if (reqExt) {
     const reqBasename = Path.basename(request, reqExt);
diff --git a/packages/kbn-test/src/jest/setup/react_testing_library.js b/packages/kbn-test/src/jest/setup/react_testing_library.js
index 758a546a511bb..d8994fdbe00e4 100644
--- a/packages/kbn-test/src/jest/setup/react_testing_library.js
+++ b/packages/kbn-test/src/jest/setup/react_testing_library.js
@@ -16,6 +16,8 @@ import '@testing-library/jest-dom';
  * But since newer versions it has stabilised itself
  */
 import { configure } from '@testing-library/react';
+import { version as REACT_VERSION } from 'react';
+import { muteLegacyRootWarning } from '@kbn/react-mute-legacy-root-warning';
 
 // instead of default 'data-testid', use kibana's 'data-test-subj'
 configure({ testIdAttribute: 'data-test-subj', asyncUtilTimeout: 4500 });
@@ -52,3 +54,14 @@ console.error = (...args) => {
 
   originalConsoleError(...args);
 };
+
+/**
+ * After we upgrade to React 18, we will see a warning in the console that we are using the legacy ReactDOM.render API.
+ * This warning is expected as we are in the process of migrating to the new createRoot API.
+ * However, it is very noisy and we want to mute it for now.
+ * Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
+ */
+if (REACT_VERSION.startsWith('18.')) {
+  console.warn('Running with React@18 and muting the legacy ReactDOM.render warning');
+  muteLegacyRootWarning();
+}
diff --git a/packages/kbn-test/tsconfig.json b/packages/kbn-test/tsconfig.json
index 00cc594809e36..af4473869eb75 100644
--- a/packages/kbn-test/tsconfig.json
+++ b/packages/kbn-test/tsconfig.json
@@ -37,5 +37,6 @@
     "@kbn/core-saved-objects-api-server",
     "@kbn/mock-idp-utils",
     "@kbn/code-owners",
+    "@kbn/react-mute-legacy-root-warning",
   ]
 }
diff --git a/packages/kbn-ui-shared-deps-npm/BUILD.bazel b/packages/kbn-ui-shared-deps-npm/BUILD.bazel
index ad3f3474f1b4e..cac4840335549 100644
--- a/packages/kbn-ui-shared-deps-npm/BUILD.bazel
+++ b/packages/kbn-ui-shared-deps-npm/BUILD.bazel
@@ -54,10 +54,12 @@ RUNTIME_DEPS = [
   "@npm//lodash",
   "@npm//moment-timezone",
   "@npm//react-dom",
+  "@npm//react-dom-18",
   "@npm//react-router-dom",
   "@npm//react-router-dom-v5-compat",
   "@npm//react-router",
   "@npm//react",
+  "@npm//react-18",
   "@npm//rxjs",
   "@npm//styled-components",
   "@npm//tslib",
@@ -99,6 +101,7 @@ webpack_cli(
     "//conditions:default": {
       "NODE_ENV": "development",
       "NODE_OPTIONS": "--openssl-legacy-provider",
+      "REACT_18": "$(REACT_18)",
     },
   })
 )
diff --git a/packages/kbn-ui-shared-deps-npm/webpack.config.js b/packages/kbn-ui-shared-deps-npm/webpack.config.js
index 926a041a72c3d..f43c294746b5e 100644
--- a/packages/kbn-ui-shared-deps-npm/webpack.config.js
+++ b/packages/kbn-ui-shared-deps-npm/webpack.config.js
@@ -140,8 +140,10 @@ module.exports = (_, argv) => {
         moment: MOMENT_SRC,
         // NOTE: Used to include react profiling on bundles
         // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
-        'react-dom$': 'react-dom/profiling',
+        'react-dom$':
+          process.env.REACT_18 === 'true' ? 'react-dom-18/profiling' : 'react-dom/profiling',
         'scheduler/tracing': 'scheduler/tracing-profiling',
+        react: process.env.REACT_18 === 'true' ? 'react-18' : 'react',
       },
       extensions: ['.js', '.ts'],
     },
diff --git a/packages/kbn-ui-shared-deps-src/BUILD.bazel b/packages/kbn-ui-shared-deps-src/BUILD.bazel
index d2e67ccd14ac6..c4f1a2dbd5f71 100644
--- a/packages/kbn-ui-shared-deps-src/BUILD.bazel
+++ b/packages/kbn-ui-shared-deps-src/BUILD.bazel
@@ -56,6 +56,7 @@ webpack_cli(
     "//conditions:default": {
       "NODE_ENV": "development",
       "NODE_OPTIONS": "--openssl-legacy-provider",
+      "REACT_18": "$(REACT_18)",
     },
   }),
   visibility = ["//visibility:public"],
diff --git a/packages/kbn-ui-shared-deps-src/webpack.config.js b/packages/kbn-ui-shared-deps-src/webpack.config.js
index c84c8928d0864..26eac38c3060c 100644
--- a/packages/kbn-ui-shared-deps-src/webpack.config.js
+++ b/packages/kbn-ui-shared-deps-src/webpack.config.js
@@ -112,8 +112,10 @@ module.exports = {
       moment: MOMENT_SRC,
       // NOTE: Used to include react profiling on bundles
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
-      'react-dom$': 'react-dom/profiling',
+      'react-dom$':
+        process.env.REACT_18 === 'true' ? 'react-dom-18/profiling' : 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
+      react: process.env.REACT_18 === 'true' ? 'react-18' : 'react',
     },
   },
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 41b1118510288..5f4c94b5fe4c2 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1428,6 +1428,8 @@
       "@kbn/react-kibana-context-theme/*": ["packages/react/kibana_context/theme/*"],
       "@kbn/react-kibana-mount": ["packages/react/kibana_mount"],
       "@kbn/react-kibana-mount/*": ["packages/react/kibana_mount/*"],
+      "@kbn/react-mute-legacy-root-warning": ["packages/kbn-react-mute-legacy-root-warning"],
+      "@kbn/react-mute-legacy-root-warning/*": ["packages/kbn-react-mute-legacy-root-warning/*"],
       "@kbn/recently-accessed": ["packages/kbn-recently-accessed"],
       "@kbn/recently-accessed/*": ["packages/kbn-recently-accessed/*"],
       "@kbn/remote-clusters-plugin": ["x-pack/plugins/remote_clusters"],
diff --git a/yarn.lock b/yarn.lock
index ce0575fde1833..67b90507c8bf4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6663,6 +6663,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/react-mute-legacy-root-warning@link:packages/kbn-react-mute-legacy-root-warning":
+  version "0.0.0"
+  uid ""
+
 "@kbn/recently-accessed@link:packages/kbn-recently-accessed":
   version "0.0.0"
   uid ""
@@ -27407,6 +27411,14 @@ re2js@0.4.3:
   resolved "https://registry.yarnpkg.com/re2js/-/re2js-0.4.3.tgz#1318cd0c12aa6ed3ba56d5e012311ffbfb2aef35"
   integrity sha512-EuNmh7jurhHEE8Ge/lBo9JuMLb3qf866Xjjfyovw3wPc7+hlqDkZq4LwhrCQMEI+ARWfrKrHozEndzlpNT0WDg==
 
+"react-18@npm:react@~18.2.0", "react@^17.0.0 || ^18.2.0":
+  name react-18
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -27450,7 +27462,8 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-"react-dom@^17.0.0 || ^18.2.0":
+"react-dom-18@npm:react-dom@~18.2.0", "react-dom@^17.0.0 || ^18.2.0":
+  name react-dom-18
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -27943,13 +27956,6 @@ react-window@^1.8.10:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-"react@^17.0.0 || ^18.2.0":
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 react@^17.0.1, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"