diff --git a/documentation/ag-grid-docs/public/images/back-to-top-icon.svg b/documentation/ag-grid-docs/public/images/back-to-top-icon.svg
new file mode 100644
index 00000000000..37594361614
--- /dev/null
+++ b/documentation/ag-grid-docs/public/images/back-to-top-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="m11 7.825l-4.9 4.9q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7l6.6-6.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l6.6 6.6q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L13 7.825V19q0 .425-.288.713T12 20t-.712-.288T11 19z"/></svg>
diff --git a/documentation/ag-grid-docs/public/images/on-this-page-icon.svg b/documentation/ag-grid-docs/public/images/on-this-page-icon.svg
new file mode 100644
index 00000000000..57bbbae83b5
--- /dev/null
+++ b/documentation/ag-grid-docs/public/images/on-this-page-icon.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.44434 12.6665H13.5554" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2.44434 3.3335H13.5554" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2.44434 8H7.33323" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>
diff --git a/documentation/ag-grid-docs/src/components/demos/examples/finance/FinanceExample.tsx b/documentation/ag-grid-docs/src/components/demos/examples/finance/FinanceExample.tsx
index 49c15fa94b8..b1dd5af46b4 100644
--- a/documentation/ag-grid-docs/src/components/demos/examples/finance/FinanceExample.tsx
+++ b/documentation/ag-grid-docs/src/components/demos/examples/finance/FinanceExample.tsx
@@ -9,7 +9,6 @@ import {
     type GetRowIdFunc,
     type GetRowIdParams,
     type GridSizeChangedEvent,
-    ModuleRegistry,
     type ValueFormatterFunc,
     type ValueGetterParams,
 } from 'ag-grid-community';
@@ -30,7 +29,7 @@ import {
     SparklinesModule,
     StatusBarModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import styles from './FinanceExample.module.css';
 import { getData } from './data';
@@ -93,7 +92,7 @@ const BREAKPOINT_CONFIG: Record<
     },
 };
 
-ModuleRegistry.registerModules([
+const modules = [
     AllCommunityModule,
     ClientSideRowModelModule,
     AdvancedFilterModule,
@@ -111,7 +110,7 @@ ModuleRegistry.registerModules([
     IntegratedChartsModule.with(AgChartsEnterpriseModule),
     SparklinesModule.with(AgChartsEnterpriseModule),
     ClipboardModule,
-]);
+];
 
 const numberFormatter: ValueFormatterFunc = ({ value }) => {
     const formatter = new Intl.NumberFormat('en-US', {
@@ -317,26 +316,28 @@ export const FinanceExample: React.FC<Props> = ({
     const chartThemes = useMemo(() => (isDarkMode ? ['ag-default-dark'] : ['ag-default']), [isDarkMode]);
 
     return (
-        <div
-            ref={gridWrapperRef}
-            style={gridHeight ? { height: gridHeight } : {}}
-            className={`${themeClass} ${styles.grid} ${gridHeight ? '' : styles.gridHeight}`}
-        >
-            <AgGridReact
-                chartThemes={chartThemes}
-                ref={gridRef}
-                getRowId={getRowId}
-                rowData={rowData}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                cellSelection={true}
-                enableCharts
-                rowGroupPanelShow={enableRowGroup ? 'always' : 'never'}
-                suppressAggFuncInHeader
-                groupDefaultExpanded={-1}
-                statusBar={statusBar}
-                onGridSizeChanged={onGridSizeChanged}
-            />
-        </div>
+        <AgGridProvider modules={modules}>
+            <div
+                ref={gridWrapperRef}
+                style={gridHeight ? { height: gridHeight } : {}}
+                className={`${themeClass} ${styles.grid} ${gridHeight ? '' : styles.gridHeight}`}
+            >
+                <AgGridReact
+                    chartThemes={chartThemes}
+                    ref={gridRef}
+                    getRowId={getRowId}
+                    rowData={rowData}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    cellSelection={true}
+                    enableCharts
+                    rowGroupPanelShow={enableRowGroup ? 'always' : 'never'}
+                    suppressAggFuncInHeader
+                    groupDefaultExpanded={-1}
+                    statusBar={statusBar}
+                    onGridSizeChanged={onGridSizeChanged}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
diff --git a/documentation/ag-grid-docs/src/components/demos/examples/hr/HRExample.tsx b/documentation/ag-grid-docs/src/components/demos/examples/hr/HRExample.tsx
index 0cb336bf8ce..47c412ba5f5 100644
--- a/documentation/ag-grid-docs/src/components/demos/examples/hr/HRExample.tsx
+++ b/documentation/ag-grid-docs/src/components/demos/examples/hr/HRExample.tsx
@@ -1,7 +1,7 @@
 import { type FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
 
 import type { ColDef, GetDataPath, ValueFormatterFunc, ValueFormatterParams } from 'ag-grid-community';
-import { AllCommunityModule, ClientSideRowModelModule, ModuleRegistry } from 'ag-grid-community';
+import { AllCommunityModule, ClientSideRowModelModule } from 'ag-grid-community';
 import {
     ExcelExportModule,
     MasterDetailModule,
@@ -11,7 +11,7 @@ import {
     StatusBarModule,
     TreeDataModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import styles from './HRExample.module.css';
 import { ContactCellRenderer } from './cell-renderers/ContactCellRenderer';
@@ -21,7 +21,7 @@ import { StatusCellRenderer } from './cell-renderers/StatusCellRenderer';
 import { TagCellRenderer } from './cell-renderers/TagCellRenderer';
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     AllCommunityModule,
     ClientSideRowModelModule,
     ExcelExportModule,
@@ -31,7 +31,7 @@ ModuleRegistry.registerModules([
     SetFilterModule,
     StatusBarModule,
     TreeDataModule,
-]);
+];
 
 interface Props {
     gridTheme?: string;
@@ -143,20 +143,22 @@ export const HRExample: FunctionComponent<Props> = ({ gridTheme = 'ag-theme-quar
     }, []);
 
     return (
-        <div className={styles.wrapper}>
-            <div className={styles.container}>
-                <div className={`${themeClass} ${styles.grid}`}>
-                    <AgGridReact
-                        ref={gridRef}
-                        columnDefs={colDefs}
-                        rowData={rowData}
-                        groupDefaultExpanded={-1}
-                        getDataPath={getDataPath}
-                        treeData
-                        autoGroupColumnDef={autoGroupColumnDef}
-                    />
+        <AgGridProvider modules={modules}>
+            <div className={styles.wrapper}>
+                <div className={styles.container}>
+                    <div className={`${themeClass} ${styles.grid}`}>
+                        <AgGridReact
+                            ref={gridRef}
+                            columnDefs={colDefs}
+                            rowData={rowData}
+                            groupDefaultExpanded={-1}
+                            getDataPath={getDataPath}
+                            treeData
+                            autoGroupColumnDef={autoGroupColumnDef}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
diff --git a/documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.tsx b/documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.tsx
index 8d60b2b6f2d..aa43974ec8c 100644
--- a/documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.tsx
+++ b/documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.tsx
@@ -8,9 +8,9 @@ import type {
     ValueFormatterParams,
     ValueGetterParams,
 } from 'ag-grid-community';
-import { AllCommunityModule, ClientSideRowModelModule, ModuleRegistry } from 'ag-grid-community';
+import { AllCommunityModule, ClientSideRowModelModule } from 'ag-grid-community';
 import { ExcelExportModule, MasterDetailModule, MultiFilterModule, SetFilterModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import styles from './InventoryExample.module.css';
 import { ActionsCellRenderer } from './cell-renderers/ActionsCellRenderer';
@@ -20,14 +20,14 @@ import { StatusCellRenderer } from './cell-renderers/StatusCellRenderer';
 import { StockCellRenderer } from './cell-renderers/StockCellRenderer';
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     AllCommunityModule,
     ClientSideRowModelModule,
     ExcelExportModule,
     SetFilterModule,
     MultiFilterModule,
     MasterDetailModule,
-]);
+];
 
 interface Props {
     gridTheme?: string;
@@ -149,63 +149,65 @@ export const InventoryExample: FunctionComponent<Props> = ({ gridTheme = 'ag-the
     }, []);
 
     return (
-        <div className={styles.wrapper}>
-            <div className={styles.container}>
-                <div className={styles.exampleHeader}>
-                    <div className={styles.tabs}>
-                        {Object.entries(statuses).map(([key, displayValue]) => (
-                            <button
-                                className={`${styles.tabButton} ${activeTab === key ? styles.active : ''}`}
-                                onClick={() => handleTabClick(key)}
-                                key={key}
+        <AgGridProvider modules={modules}>
+            <div className={styles.wrapper}>
+                <div className={styles.container}>
+                    <div className={styles.exampleHeader}>
+                        <div className={styles.tabs}>
+                            {Object.entries(statuses).map(([key, displayValue]) => (
+                                <button
+                                    className={`${styles.tabButton} ${activeTab === key ? styles.active : ''}`}
+                                    onClick={() => handleTabClick(key)}
+                                    key={key}
+                                >
+                                    {displayValue}
+                                </button>
+                            ))}
+                        </div>
+                        <div className={styles.inputWrapper}>
+                            <svg
+                                className={styles.searchIcon}
+                                width="16"
+                                height="16"
+                                viewBox="0 0 16 16"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
                             >
-                                {displayValue}
-                            </button>
-                        ))}
-                    </div>
-                    <div className={styles.inputWrapper}>
-                        <svg
-                            className={styles.searchIcon}
-                            width="16"
-                            height="16"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                fillRule="evenodd"
-                                clipRule="evenodd"
-                                d="M11.5014 7.00039C11.5014 7.59133 11.385 8.1765 11.1588 8.72246C10.9327 9.26843 10.6012 9.7645 10.1833 10.1824C9.76548 10.6002 9.2694 10.9317 8.72344 11.1578C8.17747 11.384 7.59231 11.5004 7.00136 11.5004C6.41041 11.5004 5.82525 11.384 5.27929 11.1578C4.73332 10.9317 4.23725 10.6002 3.81938 10.1824C3.40152 9.7645 3.07005 9.26843 2.8439 8.72246C2.61776 8.1765 2.50136 7.59133 2.50136 7.00039C2.50136 5.80691 2.97547 4.66232 3.81938 3.81841C4.6633 2.97449 5.80789 2.50039 7.00136 2.50039C8.19484 2.50039 9.33943 2.97449 10.1833 3.81841C11.0273 4.66232 11.5014 5.80691 11.5014 7.00039ZM10.6814 11.7404C9.47574 12.6764 7.95873 13.1177 6.43916 12.9745C4.91959 12.8314 3.51171 12.1145 2.50211 10.9698C1.49252 9.8251 0.957113 8.33868 1.0049 6.81314C1.05268 5.28759 1.68006 3.83759 2.75932 2.75834C3.83857 1.67908 5.28856 1.0517 6.81411 1.00392C8.33966 0.956136 9.82608 1.49154 10.9708 2.50114C12.1154 3.51073 12.8323 4.91862 12.9755 6.43819C13.1187 7.95775 12.6773 9.47476 11.7414 10.6804L14.5314 13.4704C14.605 13.539 14.6642 13.6218 14.7051 13.7138C14.7461 13.8058 14.7682 13.9052 14.77 14.0059C14.7717 14.1066 14.7532 14.2066 14.7155 14.3C14.6778 14.3934 14.6216 14.4782 14.5504 14.5494C14.4792 14.6206 14.3943 14.6768 14.301 14.7145C14.2076 14.7522 14.1075 14.7708 14.0068 14.769C13.9061 14.7672 13.8068 14.7452 13.7148 14.7042C13.6228 14.6632 13.54 14.6041 13.4714 14.5304L10.6814 11.7404Z"
-                                fill="currentColor"
-                            />
-                        </svg>
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M11.5014 7.00039C11.5014 7.59133 11.385 8.1765 11.1588 8.72246C10.9327 9.26843 10.6012 9.7645 10.1833 10.1824C9.76548 10.6002 9.2694 10.9317 8.72344 11.1578C8.17747 11.384 7.59231 11.5004 7.00136 11.5004C6.41041 11.5004 5.82525 11.384 5.27929 11.1578C4.73332 10.9317 4.23725 10.6002 3.81938 10.1824C3.40152 9.7645 3.07005 9.26843 2.8439 8.72246C2.61776 8.1765 2.50136 7.59133 2.50136 7.00039C2.50136 5.80691 2.97547 4.66232 3.81938 3.81841C4.6633 2.97449 5.80789 2.50039 7.00136 2.50039C8.19484 2.50039 9.33943 2.97449 10.1833 3.81841C11.0273 4.66232 11.5014 5.80691 11.5014 7.00039ZM10.6814 11.7404C9.47574 12.6764 7.95873 13.1177 6.43916 12.9745C4.91959 12.8314 3.51171 12.1145 2.50211 10.9698C1.49252 9.8251 0.957113 8.33868 1.0049 6.81314C1.05268 5.28759 1.68006 3.83759 2.75932 2.75834C3.83857 1.67908 5.28856 1.0517 6.81411 1.00392C8.33966 0.956136 9.82608 1.49154 10.9708 2.50114C12.1154 3.51073 12.8323 4.91862 12.9755 6.43819C13.1187 7.95775 12.6773 9.47476 11.7414 10.6804L14.5314 13.4704C14.605 13.539 14.6642 13.6218 14.7051 13.7138C14.7461 13.8058 14.7682 13.9052 14.77 14.0059C14.7717 14.1066 14.7532 14.2066 14.7155 14.3C14.6778 14.3934 14.6216 14.4782 14.5504 14.5494C14.4792 14.6206 14.3943 14.6768 14.301 14.7145C14.2076 14.7522 14.1075 14.7708 14.0068 14.769C13.9061 14.7672 13.8068 14.7452 13.7148 14.7042C13.6228 14.6632 13.54 14.6041 13.4714 14.5304L10.6814 11.7404Z"
+                                    fill="currentColor"
+                                />
+                            </svg>
 
-                        <input
-                            type="text"
-                            id="filter-text-box"
-                            placeholder="Search product..."
-                            onInput={onFilterTextBoxChanged}
+                            <input
+                                type="text"
+                                id="filter-text-box"
+                                placeholder="Search product..."
+                                onInput={onFilterTextBoxChanged}
+                            />
+                        </div>
+                    </div>
+                    <div className={`${themeClass} ${styles.grid}`}>
+                        <AgGridReact
+                            ref={gridRef}
+                            columnDefs={colDefs}
+                            rowData={rowData}
+                            defaultColDef={defaultColDef}
+                            rowHeight={80}
+                            autoSizeStrategy={autoSizeStrategy}
+                            pagination
+                            paginationPageSize={10}
+                            paginationPageSizeSelector={paginationPageSizeSelector}
+                            masterDetail
+                            detailCellRendererParams={detailCellRendererParams}
+                            quickFilterText={quickFilterText}
+                            detailRowAutoHeight
                         />
                     </div>
                 </div>
-                <div className={`${themeClass} ${styles.grid}`}>
-                    <AgGridReact
-                        ref={gridRef}
-                        columnDefs={colDefs}
-                        rowData={rowData}
-                        defaultColDef={defaultColDef}
-                        rowHeight={80}
-                        autoSizeStrategy={autoSizeStrategy}
-                        pagination
-                        paginationPageSize={10}
-                        paginationPageSizeSelector={paginationPageSizeSelector}
-                        masterDetail
-                        detailCellRendererParams={detailCellRendererParams}
-                        quickFilterText={quickFilterText}
-                        detailRowAutoHeight
-                    />
-                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
diff --git a/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.module.scss b/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.module.scss
index 4e532d34ec9..07d33ae5cf4 100644
--- a/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.module.scss
+++ b/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.module.scss
@@ -1,17 +1,33 @@
 @use 'design-system' as *;
 
+// Right side navigation (page level headings) - not to be confused with left DocsNav
 .sideNav {
     $top-bar-height: 8px;
 
     --left-margin: #{$spacing-size-16};
 
+    --link-color: var(--color-util-gray-500);
+    --active-color: var(--color-brand-500);
+    --active-border: var(--color-brand-500);
+    --hover-background: var(--color-util-brand-50);
+    --active-background: var(--color-util-brand-50);
+
     display: none;
     width: calc(var(--layout-width-3-12) - var(--left-margin));
     margin-left: $spacing-size-8;
     padding-top: $spacing-size-8 + 2px; // Tweak top docs page vertical alignment (+ 2px)
-    padding-bottom: $spacing-size-16;
+    padding-bottom: $spacing-size-4;
+    padding-left: $spacing-size-2;
     line-height: var(--text-lh-sm);
 
+    #{$selector-darkmode} & {
+        --link-color: var(--color-gray-400);
+        --active-color: var(--color-brand-300);
+        --active-border: var(--color-brand-300);
+        --hover-background: rgba(56, 146, 249, 0.06);
+        --active-background: rgba(56, 146, 249, 0.09);
+    }
+
     @supports (position: sticky) {
         padding-top: 0;
         padding-bottom: 0;
@@ -24,6 +40,7 @@
     > div {
         @supports (position: sticky) {
             display: flex;
+            flex-direction: column;
             margin-right: calc(var(--layout-horizontal-margins) * -1); // Improve scrollbar position
             padding-top: $spacing-size-8 + 2px; // Tweak top docs page vertical alignment (+ 2px)
             padding-right: $spacing-size-8;
@@ -44,106 +61,159 @@
     position: relative;
     flex-direction: column;
     padding-left: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
     list-style: none;
     z-index: -2;
 
-    > li:last-child {
-        min-height: $spacing-size-48;
-    }
-
     #{$selector-darkmode} & {
         --nav-line-color: var(--color-border-primary);
     }
 }
 
-.sideNav li {
+.sideNav li:not(.level1) {
     --item-gap: 0.875em;
 
     position: relative;
-    padding-left: $spacing-size-4;
-    margin: var(--item-gap) 0;
     margin-bottom: 0;
+    padding-top: calc(var(--item-gap) / 2);
+    padding-right: $spacing-size-2;
+    padding-bottom: calc(var(--item-gap) / 2);
+    padding-left: $spacing-size-4;
+    transition: background-color $transition-default-timing;
+
+    // Visual 1px border for inactive items using pseudo-element
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background-color: var(--color-util-brand-200);
+        transition:
+            width $transition-default-timing,
+            background-color $transition-default-timing;
+    }
+
+    // Dark mode: use primary border colour for inactive line
+    #{$selector-darkmode} &::before {
+        background-color: var(--color-border-primary);
+    }
+
+    &:has(:global(.active)) {
+        background-color: var(--active-background);
+    }
+
+    // Active items: show full 2px line using pseudo-element
+    &:has(:global(.active))::before {
+        width: 2px;
+        background-color: var(--active-border);
+    }
 }
 
-.sideNav a {
-    --active-color: var(--color-util-brand-500);
-    --active-border: var(--color-util-brand-400);
-    --hover-background: var(--color-util-brand-50);
-    --active-background: var(--color-util-brand-50);
+// If first item has active class apply active styles to second item
+.sideNav li:first-child:has(:global(.active)) + li {
+    background-color: var(--active-background);
+
+    &::before {
+        width: 2px;
+        background-color: var(--active-border);
+    }
+
+    a {
+        color: var(--active-color);
+    }
+}
 
+.sideNav a {
     display: inline-block;
     padding: 0;
-    color: var(--color-util-gray-500);
+    color: var(--link-color);
     transition: color $transition-default-timing;
-    font-weight: var(--text-regular);
+    font-weight: 500;
     font-size: var(--text-fs-regular);
 
-    #{$selector-darkmode} & {
-        --active-color: var(--color-brand-300);
-        --active-border: var(--color-brand-300);
-        --hover-background: rgba(56, 146, 249, 0.06);
-        --active-background: rgba(56, 146, 249, 0.09);
-
-        color: var(--color-gray-400);
-    }
-
     &:hover,
     &:global(.active) {
         color: var(--active-color);
     }
+}
 
-    &:hover {
-        #{$selector-darkmode} & {
-            color: var(--color-fg-primary);
+.sideNav .level1 {
+    margin-top: 0;
+    padding-bottom: 16px;
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        gap: $spacing-size-2;
+        padding-left: 0;
+        padding-bottom: 8px;
+        color: var(--color-text-secondary);
+        font-size: 19px;
+
+        // Use secondary foreground color when active
+        &:global(.active) {
+            color: var(--color-fg-secondary);
         }
-    }
 
-    &:global(.active) {
-        cursor: default;
-    }
-
-    &::before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        top: -$spacing-size-1;
-        bottom: -$spacing-size-1;
-        left: 0;
-        opacity: 0;
-        z-index: -1;
-        transition:
-            color 0.33s ease-in-out,
-            border-color 0.33s ease-in-out,
-            background-color 0.33s ease-in-out;
+        &:hover {
+            color: var(--color-text-secondary);
+        }
     }
+}
 
-    &:hover::before {
-        opacity: 1;
-    }
+.backToTop {
+    margin-top: 0;
+    padding-top: 16px;
+    padding-bottom: calc(0.875em / 2);
+    padding-right: $spacing-size-2;
+    border-left: none;
+    align-self: flex-start;
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        gap: $spacing-size-2;
+        padding-left: 0;
+        color: var(--color-text-secondary) !important;
+        font-size: 15px;
+        font-weight: 500;
+        text-decoration: none;
+        transition: color $transition-default-timing;
+
+        &:hover {
+            color: var(--color-fg-primary);
 
-    &:global(.active)::before {
-        opacity: 1;
+            .backToTopIcon {
+                color: var(--color-fg-primary);
+                fill: var(--color-fg-primary);
+            }
+        }
     }
 }
 
-.sideNav .level1 {
-    font-size: var(--text-fs-lg);
-    margin-top: 0;
+.backToTopIcon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    color: var(--color-util-gray-500);
+    fill: var(--color-util-gray-500);
+    transition:
+        color $transition-default-timing,
+        fill $transition-default-timing;
 }
 
 .sideNav .level3 {
-    --item-gap: 0.5em;
+    --item-gap: calc(0.5em + #{$spacing-size-1});
 
-    padding-top: $spacing-size-1;
-    padding-bottom: $spacing-size-1;
     font-weight: var(--text-regular);
 }
 
-.sideNav .level1 + .level3,
-.sideNav .level2 + .level3 {
-    margin-top: var(--item-gap);
-}
-
 .sideNav .level3,
 .sideNav .level4,
 .sideNav .level5,
diff --git a/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.tsx b/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.tsx
index 84a6cbce4cf..0dc82921a93 100644
--- a/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.tsx
+++ b/documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.tsx
@@ -3,6 +3,7 @@ import { useScrollSpy } from '@components/pages-navigation/hooks/useScrollSpy';
 import { addNonBreakingSpaceBetweenLastWords } from '@utils/addNonBreakingSpaceBetweenLastWords';
 import type { MarkdownHeading } from 'astro';
 
+import BackToTopIcon from '../../../images/back-to-top-icon.svg?react';
 import styles from './SideNavigation.module.scss';
 
 interface Props {
@@ -21,22 +22,40 @@ export function SideNavigation({ headings, delayedScrollSpy }: Props) {
         <nav ref={menuRef} className={styles.sideNav}>
             <div>
                 <ul>
-                    {headings.map(({ slug, depth, text }) => (
-                        <li key={slug} className={styles[`level${depth}`]}>
-                            <a
-                                href={`#${slug}`}
-                                className="nav-link"
-                                onClick={(event) => {
-                                    event.preventDefault();
-                                    scrollIntoViewById(slug);
-                                    navigate({ search: window.location.search, hash: slug });
-                                }}
-                            >
-                                {addNonBreakingSpaceBetweenLastWords(text)}
-                            </a>
-                        </li>
-                    ))}
+                    {headings.map(({ slug, depth, text }, index) => {
+                        const displayText = index === 0 ? 'On this page' : text;
+
+                        return (
+                            <li key={slug} className={styles[`level${depth}`]}>
+                                <a
+                                    href={`#${slug}`}
+                                    className="nav-link"
+                                    onClick={(event) => {
+                                        event.preventDefault();
+                                        scrollIntoViewById(slug);
+                                        navigate({ search: window.location.search, hash: slug });
+                                    }}
+                                >
+                                    {addNonBreakingSpaceBetweenLastWords(displayText)}
+                                </a>
+                            </li>
+                        );
+                    })}
                 </ul>
+                <div className={styles.backToTop}>
+                    <a
+                        href="#top"
+                        className="nav-link"
+                        onClick={(event) => {
+                            event.preventDefault();
+                            scrollIntoViewById('top');
+                            navigate({ search: window.location.search, hash: 'top' });
+                        }}
+                    >
+                        <BackToTopIcon className={styles.backToTopIcon} />
+                        Back to top
+                    </a>
+                </div>
             </div>
         </nav>
     );
diff --git a/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx
index 73e2d48e02f..00000ba00ea 100644
--- a/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx
@@ -1,17 +1,14 @@
 import React, { StrictMode, useCallback, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ModuleRegistry } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { callChatGPT } from './chatgptApi';
 import { type IOlympicData, gridOptions } from './gridOptions';
 import './styles.css';
 import { useFetchJson } from './useFetchJson';
 
-ModuleRegistry.registerModules([AllEnterpriseModule]);
-
 interface ChatMessage {
     prompt: string;
     response: string;
@@ -123,71 +120,73 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div className="example-controls">
-                <div className="request-container">
-                    <form className="input-group" onSubmit={processRequest}>
-                        <input
-                            type="text"
-                            value={naturalLanguageInput}
-                            onChange={(e) => setNaturalLanguageInput(e.target.value)}
-                            disabled={processingState.isProcessing}
-                            placeholder="Your prompt e.g. 'hide age column'"
-                        />
-                        <button type="submit" disabled={processingState.isProcessing}>
-                            →
-                        </button>
-                    </form>
-
-                    {processingState.message && (
-                        <div id="processingStatus">
-                            <code
-                                className={`
-                                    ${processingState.status === 'processing' ? 'process' : ''}
-                                    ${processingState.status === 'success' ? 'success' : ''}
-                                    ${processingState.status === 'error' ? 'error' : ''}
-                                `.trim()}
-                            >
-                                {processingState.message}
-                                {processingState.status === 'processing' && <b> ⧖</b>}
-                                {processingState.status === 'success' && <b> ✓</b>}
-                                {processingState.status === 'error' && <b> ✗</b>}
-                            </code>
+        <AgGridProvider modules={[AllEnterpriseModule]}>
+            <div className="example-wrapper">
+                <div className="example-controls">
+                    <div className="request-container">
+                        <form className="input-group" onSubmit={processRequest}>
+                            <input
+                                type="text"
+                                value={naturalLanguageInput}
+                                onChange={(e) => setNaturalLanguageInput(e.target.value)}
+                                disabled={processingState.isProcessing}
+                                placeholder="Your prompt e.g. 'hide age column'"
+                            />
+                            <button type="submit" disabled={processingState.isProcessing}>
+                                →
+                            </button>
+                        </form>
+
+                        {processingState.message && (
+                            <div id="processingStatus">
+                                <code
+                                    className={`
+                                        ${processingState.status === 'processing' ? 'process' : ''}
+                                        ${processingState.status === 'success' ? 'success' : ''}
+                                        ${processingState.status === 'error' ? 'error' : ''}
+                                    `.trim()}
+                                >
+                                    {processingState.message}
+                                    {processingState.status === 'processing' && <b> ⧖</b>}
+                                    {processingState.status === 'success' && <b> ✓</b>}
+                                    {processingState.status === 'error' && <b> ✗</b>}
+                                </code>
+                            </div>
+                        )}
+
+                        <div>
+                            <button onClick={resetGrid}>Reset Grid</button>
                         </div>
-                    )}
+                    </div>
 
-                    <div>
-                        <button onClick={resetGrid}>Reset Grid</button>
+                    <div className="response-container">
+                        {chatMessage && (
+                            <div id="aiResponse">
+                                <i className="prompt">Prompt</i>
+                                <p className="msg prompt">{chatMessage.prompt}</p>
+                                <i className="response">Response</i>
+                                <p className="msg response">{chatMessage.response}</p>
+                            </div>
+                        )}
+
+                        {currentState && (
+                            <div id="currentState">
+                                <h4>Current Grid State:</h4>
+                                <pre>{currentState}</pre>
+                            </div>
+                        )}
                     </div>
                 </div>
 
-                <div className="response-container">
-                    {chatMessage && (
-                        <div id="aiResponse">
-                            <i className="prompt">Prompt</i>
-                            <p className="msg prompt">{chatMessage.prompt}</p>
-                            <i className="response">Response</i>
-                            <p className="msg response">{chatMessage.response}</p>
-                        </div>
-                    )}
-
-                    {currentState && (
-                        <div id="currentState">
-                            <h4>Current Grid State:</h4>
-                            <pre>{currentState}</pre>
-                        </div>
-                    )}
-                </div>
+                <AgGridReact
+                    ref={gridRef}
+                    columnDefs={gridOptions.columnDefs}
+                    rowData={rowData}
+                    gridOptions={gridOptions}
+                    loading={loading}
+                />
             </div>
-
-            <AgGridReact
-                ref={gridRef}
-                columnDefs={gridOptions.columnDefs}
-                rowData={rowData}
-                gridOptions={gridOptions}
-                loading={loading}
-            />
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx
index f558daa5168..908b5871197 100644
--- a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx
@@ -7,22 +7,21 @@ import {
     ClientSideRowModelModule,
     ColumnApiModule,
     ColumnAutoSizeModule,
-    ModuleRegistry,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     ColumnAutoSizeModule,
     ColumnApiModule,
     AlignedGridsModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const topGridRef = useRef<AgGridReact>(null);
@@ -82,33 +81,35 @@ const GridExample = () => {
     };
 
     return (
-        <div className="container">
-            <div className="grid">
-                <AgGridReact
-                    ref={topGridRef}
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    onFirstDataRendered={onFirstDataRendered}
-                    alignedGrids={[bottomGridRef]}
-                    autoSizeStrategy={autoSizeStrategy}
-                />
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="container">
+                <div className="grid">
+                    <AgGridReact
+                        ref={topGridRef}
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        onFirstDataRendered={onFirstDataRendered}
+                        alignedGrids={[bottomGridRef]}
+                        autoSizeStrategy={autoSizeStrategy}
+                    />
+                </div>
 
-            <div className="divider"></div>
+                <div className="divider"></div>
 
-            <div className="grid">
-                <AgGridReact
-                    ref={bottomGridRef}
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    alignedGrids={[topGridRef]}
-                />
+                <div className="grid">
+                    <AgGridReact
+                        ref={bottomGridRef}
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        alignedGrids={[topGridRef]}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx
index 71ac0fc7944..b5f09baba2d 100644
--- a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx
@@ -6,17 +6,16 @@ import {
     AlignedGridsModule,
     ClientSideRowModelModule,
     ColumnAutoSizeModule,
-    ModuleRegistry,
     NumberFilterModule,
     RowStyleModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     NumberFilterModule,
     ColumnAutoSizeModule,
@@ -24,7 +23,7 @@ ModuleRegistry.registerModules([
     AlignedGridsModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const bottomData = [
     {
@@ -83,34 +82,36 @@ const GridExample = () => {
     const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }} className="example-container">
-            <div style={{ flex: '1 1 auto' }}>
-                <AgGridReact
-                    ref={topGrid}
-                    alignedGrids={[bottomGrid]}
-                    rowData={data}
-                    loading={loading}
-                    defaultColDef={defaultColDef}
-                    columnDefs={columnDefs}
-                    suppressHorizontalScroll
-                    alwaysShowVerticalScroll
-                    autoSizeStrategy={autoSizeStrategy}
-                />
-            </div>
+        <AgGridProvider modules={modules}>
+            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }} className="example-container">
+                <div style={{ flex: '1 1 auto' }}>
+                    <AgGridReact
+                        ref={topGrid}
+                        alignedGrids={[bottomGrid]}
+                        rowData={data}
+                        loading={loading}
+                        defaultColDef={defaultColDef}
+                        columnDefs={columnDefs}
+                        suppressHorizontalScroll
+                        alwaysShowVerticalScroll
+                        autoSizeStrategy={autoSizeStrategy}
+                    />
+                </div>
 
-            <div style={{ flex: 'none', height: '60px' }}>
-                <AgGridReact
-                    ref={bottomGrid}
-                    alignedGrids={[topGrid]}
-                    rowData={bottomData}
-                    defaultColDef={defaultColDef}
-                    columnDefs={columnDefs}
-                    headerHeight={0}
-                    alwaysShowVerticalScroll
-                    rowStyle={{ fontWeight: 'bold' }}
-                />
+                <div style={{ flex: 'none', height: '60px' }}>
+                    <AgGridReact
+                        ref={bottomGrid}
+                        alignedGrids={[topGrid]}
+                        rowData={bottomData}
+                        defaultColDef={defaultColDef}
+                        columnDefs={columnDefs}
+                        headerHeight={0}
+                        alwaysShowVerticalScroll
+                        rowStyle={{ fontWeight: 'bold' }}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx
index 3950e4f3d2c..fc504b5f800 100644
--- a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx
@@ -7,16 +7,15 @@ import {
     ClientSideRowModelModule,
     ColumnApiModule,
     ColumnAutoSizeModule,
-    ModuleRegistry,
     NumberFilterModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ColumnApiModule,
     TextFilterModule,
     NumberFilterModule,
@@ -24,7 +23,7 @@ ModuleRegistry.registerModules([
     AlignedGridsModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const topGrid = useRef<AgGridReact>(null);
@@ -88,47 +87,49 @@ const GridExample = () => {
     };
 
     return (
-        <div className="container">
-            <div className="header">
-                <label>
-                    <input type="checkbox" defaultChecked={true} onChange={(event) => onCbAthlete(event)} />
-                    Athlete
-                </label>
-                <label>
-                    <input type="checkbox" defaultChecked={true} onChange={(event) => onCbAge(event)} />
-                    Age
-                </label>
-                <label>
-                    <input type="checkbox" defaultChecked={true} onChange={(event) => onCbCountry(event)} />
-                    Country
-                </label>
+        <AgGridProvider modules={modules}>
+            <div className="container">
+                <div className="header">
+                    <label>
+                        <input type="checkbox" defaultChecked={true} onChange={(event) => onCbAthlete(event)} />
+                        Athlete
+                    </label>
+                    <label>
+                        <input type="checkbox" defaultChecked={true} onChange={(event) => onCbAge(event)} />
+                        Age
+                    </label>
+                    <label>
+                        <input type="checkbox" defaultChecked={true} onChange={(event) => onCbCountry(event)} />
+                        Country
+                    </label>
+                </div>
+
+                <div className="grid">
+                    <AgGridReact
+                        ref={topGrid}
+                        alignedGrids={[bottomGrid]}
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        autoSizeStrategy={autoSizeStrategy}
+                    />
+                </div>
+
+                <div className="divider"></div>
+
+                <div className="grid">
+                    <AgGridReact
+                        ref={bottomGrid}
+                        alignedGrids={[topGrid]}
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-
-            <div className="grid">
-                <AgGridReact
-                    ref={topGrid}
-                    alignedGrids={[bottomGrid]}
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    autoSizeStrategy={autoSizeStrategy}
-                />
-            </div>
-
-            <div className="divider"></div>
-
-            <div className="grid">
-                <AgGridReact
-                    ref={bottomGrid}
-                    alignedGrids={[topGrid]}
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx
index ec7aeae05fc..a2eb2f1a846 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx
@@ -6,7 +6,6 @@ import {
     ClientSideRowModelModule,
     ColumnApiModule,
     CustomEditorModule,
-    ModuleRegistry,
     NumberEditorModule,
     RenderApiModule,
     SelectEditorModule,
@@ -14,13 +13,13 @@ import {
     ValidationModule,
 } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
 const { StrictMode, useCallback, useMemo, useRef, useState } = React;
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     ColumnsToolPanelModule,
     ColumnMenuModule,
@@ -32,7 +31,7 @@ ModuleRegistry.registerModules([
     ColumnApiModule,
     RenderApiModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 function getRowData(): any[] {
     const rowData: any[] = [];
@@ -122,26 +121,28 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div style={{ marginBottom: '5px' }}>
-                    <button style={{ fontSize: '12px' }} onClick={onBtStartEditing}>
-                        Start Editing Line 2
-                    </button>
-                    <button style={{ fontSize: '12px' }} onClick={onBtStopEditing}>
-                        Stop Editing
-                    </button>
-                </div>
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                    />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div style={{ marginBottom: '5px' }}>
+                        <button style={{ fontSize: '12px' }} onClick={onBtStartEditing}>
+                            Start Editing Line 2
+                        </button>
+                        <button style={{ fontSize: '12px' }} onClick={onBtStopEditing}>
+                            Stop Editing
+                        </button>
+                    </div>
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx
index 6934335515e..3b6b4dbbff2 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx
@@ -5,18 +5,17 @@ import type { CellValueChangedEvent, ColDef, RowValueChangedEvent } from 'ag-gri
 import {
     ClientSideRowModelModule,
     CustomEditorModule,
-    ModuleRegistry,
     SelectEditorModule,
     TextEditorModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import NumericCellEditor from './numericCellEditor';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     SelectEditorModule,
     ClientSideRowModelModule,
     ColumnsToolPanelModule,
@@ -25,7 +24,7 @@ ModuleRegistry.registerModules([
     CustomEditorModule,
     TextEditorModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 function getRowData(): any[] {
     const rowData: any[] = [];
@@ -114,29 +113,31 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div style={{ marginBottom: '5px' }}>
-                    <button style={{ fontSize: '12px' }} onClick={onBtStartEditing}>
-                        Start Editing Line 2
-                    </button>
-                    <button style={{ fontSize: '12px' }} onClick={onBtStopEditing}>
-                        Stop Editing
-                    </button>
-                </div>
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        editType={'fullRow'}
-                        onCellValueChanged={onCellValueChanged}
-                        onRowValueChanged={onRowValueChanged}
-                    />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div style={{ marginBottom: '5px' }}>
+                        <button style={{ fontSize: '12px' }} onClick={onBtStartEditing}>
+                            Start Editing Line 2
+                        </button>
+                        <button style={{ fontSize: '12px' }} onClick={onBtStopEditing}>
+                            Stop Editing
+                        </button>
+                    </div>
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            editType={'fullRow'}
+                            onCellValueChanged={onCellValueChanged}
+                            onRowValueChanged={onRowValueChanged}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx
index a9fedf73fe7..cb4c3716f57 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx
@@ -5,26 +5,25 @@ import type { ColDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
     CustomEditorModule,
-    ModuleRegistry,
     NumberEditorModule,
     TextEditorModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { RichSelectModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import PhoneEditor from './phoneEditor';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     CustomEditorModule,
     ClientSideRowModelModule,
     RichSelectModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -47,11 +46,13 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx
index 6df97859e44..50172aad687 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx
@@ -5,13 +5,12 @@ import type { ColDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
     CustomEditorModule,
-    ModuleRegistry,
     NumberEditorModule,
     TextEditorModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { RichSelectModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import GenderRenderer from './genderRenderer';
@@ -20,14 +19,14 @@ import MoodRenderer from './moodRenderer';
 import SimpleTextEditor from './simpleTextEditor';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     CustomEditorModule,
     ClientSideRowModelModule,
     RichSelectModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -72,11 +71,13 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx
index 843a3db6414..49d7c4f9a16 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx
@@ -5,23 +5,22 @@ import type { ColDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
     CustomEditorModule,
-    ModuleRegistry,
     TextEditorModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import NumericEditor from './numericEditor';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextEditorModule,
     TextFilterModule,
     CustomEditorModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const [rowData] = useState([
@@ -69,16 +68,18 @@ const GridExample = () => {
     );
 
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <div
-                style={{
-                    height: '100%',
-                    width: '100%',
-                }}
-            >
-                <AgGridReact columnDefs={columnDefs} rowData={rowData} defaultColDef={defaultColDef} />
+        <AgGridProvider modules={modules}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <div
+                    style={{
+                        height: '100%',
+                        width: '100%',
+                    }}
+                >
+                    <AgGridReact columnDefs={columnDefs} rowData={rowData} defaultColDef={defaultColDef} />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx
index 995b7947767..677092aa9fd 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx
@@ -10,15 +10,9 @@ import type {
     RowEditingStartedEvent,
     RowEditingStoppedEvent,
 } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    NumberEditorModule,
-    TextEditorModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, NumberEditorModule, TextEditorModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, RichSelectModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IRow } from './data';
 import { getData } from './data';
@@ -26,7 +20,7 @@ import MoodEditor from './moodEditor';
 import NumericCellEditor from './numericCellEditor';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     ClientSideRowModelModule,
@@ -35,7 +29,7 @@ ModuleRegistry.registerModules([
     ColumnsToolPanelModule,
     RichSelectModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const cellEditorSelector: (params: ICellEditorParams<IRow>) => CellEditorSelectorResult | undefined = (
     params: ICellEditorParams<IRow>
@@ -99,19 +93,21 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IRow>
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    onRowEditingStarted={onRowEditingStarted}
-                    onRowEditingStopped={onRowEditingStopped}
-                    onCellEditingStarted={onCellEditingStarted}
-                    onCellEditingStopped={onCellEditingStopped}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IRow>
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        onRowEditingStarted={onRowEditingStarted}
+                        onRowEditingStopped={onRowEditingStopped}
+                        onCellEditingStarted={onCellEditingStarted}
+                        onCellEditingStopped={onCellEditingStopped}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx
index 95462a756ff..ca1acbb4a51 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx
@@ -5,26 +5,25 @@ import type { ColDef, GridReadyEvent, ICellEditor } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
     CustomEditorModule,
-    ModuleRegistry,
     NumberEditorModule,
     TextEditorModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact, getInstance } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact, getInstance } from 'ag-grid-react';
 
 import type { MySimpleInterface } from './mySimpleEditor';
 import MySimpleEditor from './mySimpleEditor';
 import './style.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     TextFilterModule,
     CustomEditorModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const createRowData = () => {
     const cloneObject = (obj: any) => JSON.parse(JSON.stringify(obj));
@@ -160,22 +159,24 @@ const GridExample = () => {
     );
 
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <div
-                style={{
-                    height: '100%',
-                    width: '100%',
-                }}
-            >
-                <AgGridReact
-                    ref={gridRef}
-                    defaultColDef={defaultColDef}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <div
+                    style={{
+                        height: '100%',
+                        width: '100%',
+                    }}
+                >
+                    <AgGridReact
+                        ref={gridRef}
+                        defaultColDef={defaultColDef}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx
index 098a6d98b10..374253fdb03 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx
@@ -5,27 +5,26 @@ import type { ColDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
     CustomEditorModule,
-    ModuleRegistry,
     NumberEditorModule,
     TextEditorModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { RichSelectModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import MoodEditor from './moodEditor';
 import MoodRenderer from './moodRenderer';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     CustomEditorModule,
     ClientSideRowModelModule,
     RichSelectModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -63,11 +62,13 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx
index 0d2f27ff052..a9c5719692c 100644
--- a/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx
@@ -5,23 +5,22 @@ import type { CellClassParams, CellClassRules, ColDef, ValueParserParams } from
 import {
     CellStyleModule,
     ClientSideRowModelModule,
-    ModuleRegistry,
     NumberEditorModule,
     TextEditorModule,
     ValidationModule,
 } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     CellStyleModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const ragCellClassRules: CellClassRules = {
     'rag-green-outer': (params) => params.value === 2008,
@@ -127,11 +126,18 @@ const GridExample = () => {
     const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact rowData={data} loading={loading} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx
index b3149c87fd3..f83fdf92a9f 100644
--- a/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx
@@ -2,17 +2,17 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, SizeColumnsToFitGridStrategy } from 'ag-grid-community';
-import { ClientSideRowModelModule, ColumnAutoSizeModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ColumnAutoSizeModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ColumnAutoSizeModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const columnDefinitions: ColDef[] = [{ field: 'athlete' }, { field: 'age' }, { field: 'country' }, { field: 'sport' }];
 
@@ -48,23 +48,25 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="test-container">
-                <div className="test-header">
-                    <button onClick={onBtUpdateHeaders}>Update Header Names</button>
-                    <button onClick={onBtRestoreHeaders}>Restore Original Column Definitions</button>
-                </div>
-                <div style={gridStyle}>
-                    <AgGridReact<IOlympicData>
-                        ref={gridRef}
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        autoSizeStrategy={autoSizeStrategy}
-                    />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="test-container">
+                    <div className="test-header">
+                        <button onClick={onBtUpdateHeaders}>Update Header Names</button>
+                        <button onClick={onBtRestoreHeaders}>Restore Original Column Definitions</button>
+                    </div>
+                    <div style={gridStyle}>
+                        <AgGridReact<IOlympicData>
+                            ref={gridRef}
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            autoSizeStrategy={autoSizeStrategy}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx
index 9c9c5dd42a0..cfafe8f0fe2 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx
@@ -4,25 +4,24 @@ import { createRoot } from 'react-dom/client';
 import type { ColDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
-    ModuleRegistry,
     TextEditorModule,
     TextFilterModule,
     TooltipModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import AthleteCellRenderer from './athleteCellRenderer';
 import type { IOlympicData } from './interfaces';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextEditorModule,
     TextFilterModule,
     ClientSideRowModelModule,
     TooltipModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact<IOlympicData>>(null);
@@ -43,17 +42,19 @@ const GridExample = () => {
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    ref={gridRef}
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        ref={gridRef}
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx
index 4bc4c8b447b..371571a4a97 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx
@@ -1,10 +1,9 @@
 import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import type { ColDef, GridReadyEvent, ValueGetterParams } from 'ag-grid-community';
+import type { ColDef, ValueGetterParams } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
-    ModuleRegistry,
     NumberEditorModule,
     NumberFilterModule,
     RenderApiModule,
@@ -13,13 +12,13 @@ import {
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import MedalCellRenderer from './medalCellRenderer';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     RenderApiModule,
     NumberEditorModule,
     TextEditorModule,
@@ -28,7 +27,7 @@ ModuleRegistry.registerModules([
     RowApiModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact<IOlympicData>>(null);
@@ -91,25 +90,27 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div style={{ marginBottom: '5px' }}>
-                    <button onClick={onCallGold}>Gold</button>
-                    <button onClick={onFirstRowGold}>First Row Gold</button>
-                    <button onClick={onCallAllCells}>All Cells</button>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div style={{ marginBottom: '5px' }}>
+                        <button onClick={onCallGold}>Gold</button>
+                        <button onClick={onFirstRowGold}>First Row Gold</button>
+                        <button onClick={onCallAllCells}>All Cells</button>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact<IOlympicData>
-                        ref={gridRef}
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact<IOlympicData>
+                            ref={gridRef}
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx
index c930740a007..6d15e3f2c55 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx
@@ -1,37 +1,33 @@
 'use client';
 
-import React, { StrictMode, useCallback, useMemo, useState } from 'react';
+import { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    type CellClickedEvent,
-    type CellDoubleClickedEvent,
-    type CellMouseDownEvent,
-    ClientSideRowModelModule,
+import type {
+    CellClickedEvent,
+    CellDoubleClickedEvent,
+    CellMouseDownEvent,
     ColDef,
     EventCellRendererParams,
-    ModuleRegistry,
-    NumberEditorModule,
-    type RowClickedEvent,
-    type RowDoubleClickedEvent,
-    RowSelectionModule,
+    RowClickedEvent,
+    RowDoubleClickedEvent,
     RowSelectionOptions,
     SuppressMouseEventHandlingParams,
-    TextEditorModule,
 } from 'ag-grid-community';
+import { ClientSideRowModelModule, NumberEditorModule, RowSelectionModule, TextEditorModule } from 'ag-grid-community';
 import { CellSelectionModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomButtonComponent from './customButtonComponent';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     CellSelectionModule,
     RowSelectionModule,
     TextEditorModule,
     NumberEditorModule,
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -87,29 +83,35 @@ const GridExample = () => {
     );
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div style={{ marginBottom: '5px' }}>
-                    <button onClick={toggleCellSelection}>{cellSelection ? 'Disable' : 'Enable'} Cell Selection</button>
-                    <button onClick={toggleRowSelection}>{rowSelection ? 'Disable' : 'Enable'} Row Selection</button>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div style={{ marginBottom: '5px' }}>
+                        <button onClick={toggleCellSelection}>
+                            {cellSelection ? 'Disable' : 'Enable'} Cell Selection
+                        </button>
+                        <button onClick={toggleRowSelection}>
+                            {rowSelection ? 'Disable' : 'Enable'} Row Selection
+                        </button>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        rowData={rowData}
-                        defaultColDef={defaultColDef}
-                        columnDefs={columnDefs}
-                        cellSelection={cellSelection}
-                        rowSelection={rowSelection}
-                        onCellClicked={onMouseEvent}
-                        onCellMouseDown={onMouseEvent}
-                        onCellDoubleClicked={onMouseEvent}
-                        onRowClicked={onMouseEvent}
-                        onRowDoubleClicked={onMouseEvent}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            rowData={rowData}
+                            defaultColDef={defaultColDef}
+                            columnDefs={columnDefs}
+                            cellSelection={cellSelection}
+                            rowSelection={rowSelection}
+                            onCellClicked={onMouseEvent}
+                            onCellMouseDown={onMouseEvent}
+                            onCellDoubleClicked={onMouseEvent}
+                            onRowClicked={onMouseEvent}
+                            onRowDoubleClicked={onMouseEvent}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx
index 6985d25370d..0c3842f7a09 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx
@@ -3,18 +3,16 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ColDef, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
+import type { ColDef } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { IOlympicData } from './interfaces';
 import { LazyCellLoader } from './lazyCellComp';
 import './styles.css';
 import { useFetchJson } from './useFetchJson';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 const LazyCellRenderer = React.lazy(LazyCellLoader);
 
@@ -49,18 +47,20 @@ const GridExample = () => {
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div style={gridStyle}>
-                    <AgGridReact<IOlympicData>
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                    />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div style={gridStyle}>
+                        <AgGridReact<IOlympicData>
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx
index 5f42e70664d..b9da86dd961 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx
@@ -5,24 +5,23 @@ import type { ColDef, ColGroupDef, DoesFilterPassParams, FilterDisplay } from 'a
 import {
     ClientSideRowModelModule,
     CustomFilterModule,
-    ModuleRegistry,
     TextEditorModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact, getInstance } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact, getInstance } from 'ag-grid-react';
 
 import { getData } from './data';
 import PartialMatchFilter from './partialMatchFilter';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     TextEditorModule,
     CustomFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 function doesFilterPass({ model, node, handlerParams }: DoesFilterPassParams<any, any, string>): boolean {
     const value = handlerParams.getValue(node).toString().toLowerCase();
@@ -67,23 +66,25 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <button style={{ marginBottom: '5px' }} onClick={onClicked} className="btn btn-primary">
-                    Invoke Filter Instance Method
-                </button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <button style={{ marginBottom: '5px' }} onClick={onClicked} className="btn btn-primary">
+                        Invoke Filter Instance Method
+                    </button>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        enableFilterHandlers
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            enableFilterHandlers
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx
index 4f9a88feee5..1d84ab1ff5f 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx
@@ -1,28 +1,27 @@
-import React, { StrictMode, useCallback, useMemo, useState } from 'react';
+import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
     CustomFilterModule,
-    ModuleRegistry,
     NumberFilterModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import NumberFilterComponent from './numberFilterComponent';
 import NumberFloatingFilterComponent from './numberFloatingFilterComponent';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     CustomFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -67,16 +66,18 @@ const GridExample = () => {
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx
index 342d2384c79..e56c2b96108 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx
@@ -1,18 +1,18 @@
-import React, { StrictMode, useCallback, useMemo, useState } from 'react';
+import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import { ClientSideRowModelModule, CustomFilterModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, CustomFilterModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import NumberFilterComponent from './numberFilterComponent';
 
-ModuleRegistry.registerModules([
+const modules = [
     CustomFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -57,16 +57,18 @@ const GridExample = () => {
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx
index d4c8357e716..9d2d588ba25 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx
@@ -1,25 +1,19 @@
-import React, { StrictMode, useCallback, useMemo, useState } from 'react';
+import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import NumberFloatingFilterComponent from './numberFloatingFilterComponent';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -80,16 +74,18 @@ const GridExample = () => {
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx
index 18079768219..11cd5ec2e58 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx
@@ -1,24 +1,18 @@
-import React, { StrictMode, useCallback, useMemo, useState } from 'react';
+import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, INumberFilterParams } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import SliderFloatingFilter from './sliderFloatingFilter';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const filterParams: INumberFilterParams = {
     filterOptions: ['greaterThan'],
@@ -77,19 +71,21 @@ const GridExample = () => {
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
     return (
-        <div style={containerStyle}>
-            <div style={{ height: '100%', boxSizing: 'border-box' }}>
-                <div style={gridStyle}>
-                    <AgGridReact
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        alwaysShowVerticalScroll
-                    />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={{ height: '100%', boxSizing: 'border-box' }}>
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            alwaysShowVerticalScroll
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx
index 5e7930c177f..0095c9ef11a 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx
@@ -2,7 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GetContextMenuItemsParams, GetMainMenuItemsParams } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import {
     CellSelectionModule,
     ClipboardModule,
@@ -10,12 +10,12 @@ import {
     ContextMenuModule,
     ExcelExportModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import MenuItem from './menuItem';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     ColumnMenuModule,
 
@@ -24,7 +24,7 @@ ModuleRegistry.registerModules([
     CellSelectionModule,
     ClipboardModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -93,18 +93,20 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    getMainMenuItems={getMainMenuItems}
-                    getContextMenuItems={getContextMenuItems}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        getMainMenuItems={getMainMenuItems}
+                        getContextMenuItems={getContextMenuItems}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx
index 34eb9ccd25c..77616ee7b07 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx
@@ -1,14 +1,8 @@
 import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import type { ColDef, GetMainMenuItemsParams } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import type { ColDef, GetMainMenuItems } from 'ag-grid-community';
+import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import {
     CellSelectionModule,
     ClipboardModule,
@@ -16,13 +10,13 @@ import {
     ContextMenuModule,
     ExcelExportModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import MenuItem from './menuItem';
 import './style.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
@@ -32,7 +26,7 @@ ModuleRegistry.registerModules([
     CellSelectionModule,
     ClipboardModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -58,7 +52,7 @@ const GridExample = () => {
 
     const { data, loading } = useFetchJson<IOlympicData>('https://www.ag-grid.com/example-assets/olympic-winners.json');
 
-    const getMainMenuItems = useCallback((params: GetMainMenuItemsParams) => {
+    const getMainMenuItems = useCallback<GetMainMenuItems>((params) => {
         return [
             ...params.defaultItems.filter((item) => item !== 'columnFilter'),
             'separator',
@@ -73,17 +67,19 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    rowData={data}
-                    loading={loading}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    getMainMenuItems={getMainMenuItems}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        rowData={data}
+                        loading={loading}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        getMainMenuItems={getMainMenuItems}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx
index 3baa9c1a931..96348164c67 100644
--- a/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx
@@ -6,7 +6,6 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     EventApiModule,
-    ModuleRegistry,
     NumberEditorModule,
     NumberFilterModule,
     RowApiModule,
@@ -17,12 +16,12 @@ import {
     themeQuartz,
 } from 'ag-grid-community';
 import { ColumnsToolPanelModule, FiltersToolPanelModule, SetFilterModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomStatsToolPanel from './customStatsToolPanel';
 import type { IOlympicData } from './interfaces';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     NumberEditorModule,
     TextEditorModule,
@@ -35,7 +34,7 @@ ModuleRegistry.registerModules([
     RowApiModule,
     EventApiModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const myTheme = themeQuartz.withPart(
     iconOverrides({
@@ -119,22 +118,24 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={{ height: '100%', boxSizing: 'border-box' }}>
-                <div style={gridStyle}>
-                    <AgGridReact<IOlympicData>
-                        theme={myTheme}
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        icons={icons}
-                        sideBar={sideBar}
-                        onCellValueChanged={onCellValueChanged}
-                    />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={{ height: '100%', boxSizing: 'border-box' }}>
+                    <div style={gridStyle}>
+                        <AgGridReact<IOlympicData>
+                            theme={myTheme}
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            icons={icons}
+                            sideBar={sideBar}
+                            onCellValueChanged={onCellValueChanged}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx
index 744cc8cdb0e..5584f2f63e2 100644
--- a/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx
@@ -6,7 +6,6 @@ import {
     CellStyleModule,
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
-    ModuleRegistry,
     QuickFilterModule,
     RenderApiModule,
     RowSelectionModule,
@@ -14,11 +13,11 @@ import {
 } from 'ag-grid-community';
 import { FiltersToolPanelModule, RowGroupingModule, SetFilterModule } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     RenderApiModule,
     RowSelectionModule,
@@ -29,7 +28,7 @@ ModuleRegistry.registerModules([
     SetFilterModule,
     FiltersToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const monthValueGetter =
     '(ctx.month < ctx.months.indexOf(colDef.field)) ? data[colDef.field + "_bud"] : data[colDef.field + "_act"]';
@@ -191,52 +190,54 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="test-container">
-                <div className="test-header">
-                    <input
-                        type="text"
-                        id="filter-text-box"
-                        style={{ width: '100px' }}
-                        onChange={(e) => onQuickFilterChanged(e.target.value)}
-                        placeholder="Filter..."
-                    />
-
-                    <span style={{ paddingLeft: '20px' }}>
-                        <b>Period:</b>
-                        <button onClick={() => onChangeMonth(-1)}>
-                            <i className="fa fa-chevron-left"></i>
-                        </button>
-                        <button onClick={() => onChangeMonth(1)}>
-                            <i className="fa fa-chevron-right"></i>
-                        </button>
-                        <span id="monthName" style={{ width: '100px', display: 'inline-block' }}>
-                            Year to Jan
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="test-container">
+                    <div className="test-header">
+                        <input
+                            type="text"
+                            id="filter-text-box"
+                            style={{ width: '100px' }}
+                            onChange={(e) => onQuickFilterChanged(e.target.value)}
+                            placeholder="Filter..."
+                        />
+
+                        <span style={{ paddingLeft: '20px' }}>
+                            <b>Period:</b>
+                            <button onClick={() => onChangeMonth(-1)}>
+                                <i className="fa fa-chevron-left"></i>
+                            </button>
+                            <button onClick={() => onChangeMonth(1)}>
+                                <i className="fa fa-chevron-right"></i>
+                            </button>
+                            <span id="monthName" style={{ width: '100px', display: 'inline-block' }}>
+                                Year to Jan
+                            </span>
                         </span>
-                    </span>
-
-                    <span style={{ paddingLeft: '20px' }}>
-                        <b>Legend:</b>&nbsp;&nbsp;
-                        <div className="cell-bud legend-box"></div> Actual&nbsp;&nbsp;
-                        <div className="cell-act legend-box"></div> Budget
-                    </span>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        suppressMovableColumns={true}
-                        context={context.current}
-                        defaultColDef={defaultColDef}
-                        autoGroupColumnDef={autoGroupColumnDef}
-                        rowSelection={rowSelection}
-                    />
+                        <span style={{ paddingLeft: '20px' }}>
+                            <b>Legend:</b>&nbsp;&nbsp;
+                            <div className="cell-bud legend-box"></div> Actual&nbsp;&nbsp;
+                            <div className="cell-act legend-box"></div> Budget
+                        </span>
+                    </div>
+
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            suppressMovableColumns={true}
+                            context={context.current}
+                            defaultColDef={defaultColDef}
+                            autoGroupColumnDef={autoGroupColumnDef}
+                            rowSelection={rowSelection}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx
index 6dd68787129..9ddfca96cb9 100644
--- a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx
@@ -5,24 +5,23 @@ import type { ColDef, EditableCallbackParams, GetRowIdParams, RowEditingStoppedE
 import {
     ClientSideRowModelModule,
     ColumnApiModule,
-    ModuleRegistry,
     NumberEditorModule,
     PinnedRowModule,
     TextEditorModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     ColumnApiModule,
     ClientSideRowModelModule,
     TextEditorModule,
     NumberEditorModule,
     PinnedRowModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -77,29 +76,31 @@ const GridExample = () => {
     );
 
     return (
-        <div style={containerStyle}>
-            <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
-                <div>
-                    <div style={{ marginBottom: '5px', minHeight: '30px' }}>
-                        <button onClick={addNewRow}>Add New Row</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
+                    <div>
+                        <div style={{ marginBottom: '5px', minHeight: '30px' }}>
+                            <button onClick={addNewRow}>Add New Row</button>
+                        </div>
                     </div>
-                </div>
-                <div style={{ flex: '1 1 0px' }}>
-                    <div style={gridStyle}>
-                        <AgGridReact
-                            ref={gridRef}
-                            rowData={rowData}
-                            columnDefs={columnDefs}
-                            defaultColDef={defaultColDef}
-                            editType={'fullRow'}
-                            getRowId={getRowId}
-                            pinnedBottomRowData={pinnedBottomRowData}
-                            onRowEditingStopped={onRowEditingStopped}
-                        />
+                    <div style={{ flex: '1 1 0px' }}>
+                        <div style={gridStyle}>
+                            <AgGridReact
+                                ref={gridRef}
+                                rowData={rowData}
+                                columnDefs={columnDefs}
+                                defaultColDef={defaultColDef}
+                                editType={'fullRow'}
+                                getRowId={getRowId}
+                                pinnedBottomRowData={pinnedBottomRowData}
+                                onRowEditingStopped={onRowEditingStopped}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx
index d623337b380..1094eaee285 100644
--- a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx
@@ -12,7 +12,6 @@ import {
     CellStyleModule,
     ClientSideRowModelModule,
     HighlightChangesModule,
-    ModuleRegistry,
     NumberFilterModule,
     RowSelectionModule,
     TextEditorModule,
@@ -20,11 +19,11 @@ import {
     ValidationModule,
 } from 'ag-grid-community';
 import { RowGroupingModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     HighlightChangesModule,
     TextEditorModule,
     NumberFilterModule,
@@ -34,7 +33,7 @@ ModuleRegistry.registerModules([
     ClientSideRowModelModule,
     RowGroupingModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const MIN_BOOK_COUNT = 10;
 const MAX_BOOK_COUNT = 20;
@@ -401,25 +400,27 @@ const GridExample = () => {
     useEffect(() => setRowData(globalRowData), [globalRowData]);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div style={{ marginBottom: '5px' }}>
-                    <button onClick={updateData}>Update</button>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div style={{ marginBottom: '5px' }}>
+                        <button onClick={updateData}>Update</button>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        autoGroupColumnDef={autoGroupColumnDef}
-                        rowSelection={rowSelection}
-                        suppressAggFuncInHeader={true}
-                        getRowId={getRowId}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            autoGroupColumnDef={autoGroupColumnDef}
+                            rowSelection={rowSelection}
+                            suppressAggFuncInHeader={true}
+                            getRowId={getRowId}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx
index fc23cbf5311..0d3bd35c2f5 100644
--- a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx
@@ -5,15 +5,14 @@ import type { ColDef, GetRowIdParams, GridApi, GridReadyEvent, RowSelectionOptio
 import {
     ClientSideRowModelModule,
     ColumnApiModule,
-    ModuleRegistry,
     RowSelectionModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { CellSelectionModule, RowGroupingModule, StatusBarModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
+const modules = [
     ColumnApiModule,
     TextFilterModule,
     RowSelectionModule,
@@ -22,7 +21,7 @@ ModuleRegistry.registerModules([
     StatusBarModule,
     CellSelectionModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 // creates a unique symbol, eg 'ADG' or 'ZJD'
 function createUniqueRandomSymbol(data: any[]) {
@@ -206,47 +205,49 @@ const GridExample = () => {
     }, [rowData]);
 
     return (
-        <div style={containerStyle}>
-            <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
-                <div>
-                    <div style={{ marginBottom: '5px', minHeight: '30px' }}>
-                        <button onClick={reverseItems}>Reverse</button>
-                        <button onClick={() => addFiveItems(true)}>Append</button>
-                        <button onClick={() => addFiveItems(false)}>Prepend</button>
-                        <button onClick={removeSelected}>Remove Selected</button>
-                        <button onClick={updatePrices}>Update Prices</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
+                    <div>
+                        <div style={{ marginBottom: '5px', minHeight: '30px' }}>
+                            <button onClick={reverseItems}>Reverse</button>
+                            <button onClick={() => addFiveItems(true)}>Append</button>
+                            <button onClick={() => addFiveItems(false)}>Prepend</button>
+                            <button onClick={removeSelected}>Remove Selected</button>
+                            <button onClick={updatePrices}>Update Prices</button>
+                        </div>
+                        <div style={{ marginBottom: '5px', minHeight: '30px' }}>
+                            <button id="groupingOn" onClick={() => onGroupingEnabled(true)}>
+                                Grouping On
+                            </button>
+                            <button id="groupingOff" onClick={() => onGroupingEnabled(false)}>
+                                Grouping Off
+                            </button>
+                            <button onClick={() => setSelectedToGroup('A')}>Move to Group A</button>
+                            <button onClick={() => setSelectedToGroup('B')}>Move to Group B</button>
+                            <button onClick={() => setSelectedToGroup('C')}>Move to Group C</button>
+                        </div>
                     </div>
-                    <div style={{ marginBottom: '5px', minHeight: '30px' }}>
-                        <button id="groupingOn" onClick={() => onGroupingEnabled(true)}>
-                            Grouping On
-                        </button>
-                        <button id="groupingOff" onClick={() => onGroupingEnabled(false)}>
-                            Grouping Off
-                        </button>
-                        <button onClick={() => setSelectedToGroup('A')}>Move to Group A</button>
-                        <button onClick={() => setSelectedToGroup('B')}>Move to Group B</button>
-                        <button onClick={() => setSelectedToGroup('C')}>Move to Group C</button>
-                    </div>
-                </div>
-                <div style={{ flex: '1 1 0px' }}>
-                    <div style={gridStyle}>
-                        <AgGridReact
-                            ref={gridRef}
-                            rowData={rowData}
-                            columnDefs={columnDefs}
-                            defaultColDef={defaultColDef}
-                            rowSelection={rowSelection}
-                            cellSelection={true}
-                            autoGroupColumnDef={autoGroupColumnDef}
-                            statusBar={statusBar}
-                            groupDefaultExpanded={1}
-                            getRowId={getRowId}
-                            onGridReady={onGridReady}
-                        />
+                    <div style={{ flex: '1 1 0px' }}>
+                        <div style={gridStyle}>
+                            <AgGridReact
+                                ref={gridRef}
+                                rowData={rowData}
+                                columnDefs={columnDefs}
+                                defaultColDef={defaultColDef}
+                                rowSelection={rowSelection}
+                                cellSelection={true}
+                                autoGroupColumnDef={autoGroupColumnDef}
+                                statusBar={statusBar}
+                                groupDefaultExpanded={1}
+                                getRowId={getRowId}
+                                onGridReady={onGridReady}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx
index 1c8d0f10077..c94c4a825c9 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx
@@ -4,11 +4,9 @@ import { createRoot } from 'react-dom/client';
 
 // Theme
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import { AllCommunityModule } from 'ag-grid-community';
 // Core CSS
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -37,9 +35,11 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <AgGridReact rowData={rowData} columnDefs={colDefs} />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <AgGridReact rowData={rowData} columnDefs={colDefs} />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx
index 79d71501622..763c17468d2 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx
@@ -1,15 +1,11 @@
 // React Grid Logic
-import React, { StrictMode, useEffect, useMemo, useState } from 'react';
+import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
+import { AllCommunityModule } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Custom Cell Renderer (Display logos based on cell value)
 const CompanyLogoRenderer = (params: CustomCellRendererProps) => (
@@ -82,16 +78,18 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact
-                rowData={data}
-                loading={loading}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                pagination={true}
-            />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact
+                    rowData={data}
+                    loading={loading}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    pagination={true}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx
index 061239fc8c3..846db84ed8f 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx
@@ -2,13 +2,9 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -40,10 +36,12 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact rowData={data} loading={loading} columnDefs={colDefs} />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact rowData={data} loading={loading} columnDefs={colDefs} />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx
index d6aeed4f780..6b5b2ce7f66 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx
@@ -2,13 +2,9 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -47,10 +43,12 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact rowData={data} loading={loading} columnDefs={colDefs} defaultColDef={defaultColDef} />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact rowData={data} loading={loading} columnDefs={colDefs} defaultColDef={defaultColDef} />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx
index 93459e3d4f6..1ef0df4d914 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx
@@ -2,14 +2,10 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
+import { AllCommunityModule } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Custom Cell Renderer (Display logos based on cell value)
 const CompanyLogoRenderer = (params: CustomCellRendererProps) => (
@@ -83,17 +79,19 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact
-                rowData={data}
-                loading={loading}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                pagination={true}
-                onCellValueChanged={(event) => console.log(`New Cell Value: ${event.value}`)}
-            />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact
+                    rowData={data}
+                    loading={loading}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    pagination={true}
+                    onCellValueChanged={(event) => console.log(`New Cell Value: ${event.value}`)}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx
index f4ec3ab3958..e7511d12a5d 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx
@@ -2,13 +2,9 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -47,16 +43,18 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact
-                rowData={data}
-                loading={loading}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                pagination={true}
-            />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact
+                    rowData={data}
+                    loading={loading}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    pagination={true}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx
index 77b27171a97..3c12456aac0 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx
@@ -2,14 +2,10 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef, RowSelectionOptions, ValueFormatterParams } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
+import { AllCommunityModule } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Custom Cell Renderer (Display logos based on cell value)
 const CompanyLogoRenderer = (params: CustomCellRendererProps) => (
@@ -121,18 +117,20 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <AgGridReact
-                rowData={data}
-                loading={loading}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                pagination={true}
-                rowSelection={rowSelection}
-                onSelectionChanged={(event) => console.log('Row Selected!')}
-                onCellValueChanged={(event) => console.log(`New Cell Value: ${event.value}`)}
-            />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <AgGridReact
+                    rowData={data}
+                    loading={loading}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    pagination={true}
+                    rowSelection={rowSelection}
+                    onSelectionChanged={(event) => console.log('Row Selected!')}
+                    onCellValueChanged={(event) => console.log(`New Cell Value: ${event.value}`)}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx
index 20347437395..89fbd2850ac 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx
@@ -2,13 +2,9 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -40,10 +36,12 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact rowData={data} loading={loading} columnDefs={colDefs} />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact rowData={data} loading={loading} columnDefs={colDefs} />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx
index bcde7f0981b..a375d3e6760 100644
--- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx
@@ -2,13 +2,9 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Theme
 import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-// Core CSS
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -55,16 +51,18 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            {/* The AG Grid component, with Row Data & Column Definition props */}
-            <AgGridReact
-                rowData={data}
-                loading={loading}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                pagination={true}
-            />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                {/* The AG Grid component, with Row Data & Column Definition props */}
+                <AgGridReact
+                    rowData={data}
+                    loading={loading}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    pagination={true}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx
index 8e182a19d65..bf2e69e29fd 100644
--- a/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx
@@ -6,18 +6,17 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     DragAndDropModule,
-    ModuleRegistry,
     RowApiModule,
     RowDragModule,
     RowStyleModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     DragAndDropModule,
     ClientSideRowModelApiModule,
     RowApiModule,
@@ -26,7 +25,7 @@ ModuleRegistry.registerModules([
     RowStyleModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const baseDefaultColDef: ColDef = {
     flex: 1,
@@ -171,52 +170,54 @@ const GridExample = () => {
     };
 
     return (
-        <div className="outer">
-            <div
-                style={{ height: '100%' }}
-                className="inner-col"
-                onDragOver={gridDragOver}
-                onDrop={(e) => gridDrop('left', e)}
-            >
-                <AgGridReact ref={leftGridRef} gridOptions={leftGridOptions} onGridReady={onLeftGridReady} />
-            </div>
-
-            <div className="inner-col factory-panel">
-                <span id="eBin" onDragOver={binDragOver} onDrop={binDrop} className="factory factory-bin">
-                    <i className="far fa-trash-alt">
-                        <span className="filename"> Trash - </span>
-                    </i>
-                    Drop target to destroy row
-                </span>
-                <span draggable="true" onDragStart={(e) => dragStart('Red', e)} className="factory factory-red">
-                    <i className="far fa-plus-square">
-                        <span className="filename"> Create - </span>
-                    </i>
-                    Drag source for new red item
-                </span>
-                <span draggable="true" onDragStart={(e) => dragStart('Green', e)} className="factory factory-green">
-                    <i className="far fa-plus-square">
-                        <span className="filename"> Create - </span>
-                    </i>
-                    Drag source for new green item
-                </span>
-                <span draggable="true" onDragStart={(e) => dragStart('Blue', e)} className="factory factory-blue">
-                    <i className="far fa-plus-square">
-                        <span className="filename"> Create - </span>
-                    </i>
-                    Drag source for new blue item
-                </span>
-            </div>
-
-            <div
-                style={{ height: '100%' }}
-                className="inner-col"
-                onDragOver={gridDragOver}
-                onDrop={(e) => gridDrop('right', e)}
-            >
-                <AgGridReact ref={rightGridRef} gridOptions={rightGridOptions} onGridReady={onRightGridReady} />
+        <AgGridProvider modules={modules}>
+            <div className="outer">
+                <div
+                    style={{ height: '100%' }}
+                    className="inner-col"
+                    onDragOver={gridDragOver}
+                    onDrop={(e) => gridDrop('left', e)}
+                >
+                    <AgGridReact ref={leftGridRef} gridOptions={leftGridOptions} onGridReady={onLeftGridReady} />
+                </div>
+
+                <div className="inner-col factory-panel">
+                    <span id="eBin" onDragOver={binDragOver} onDrop={binDrop} className="factory factory-bin">
+                        <i className="far fa-trash-alt">
+                            <span className="filename"> Trash - </span>
+                        </i>
+                        Drop target to destroy row
+                    </span>
+                    <span draggable="true" onDragStart={(e) => dragStart('Red', e)} className="factory factory-red">
+                        <i className="far fa-plus-square">
+                            <span className="filename"> Create - </span>
+                        </i>
+                        Drag source for new red item
+                    </span>
+                    <span draggable="true" onDragStart={(e) => dragStart('Green', e)} className="factory factory-green">
+                        <i className="far fa-plus-square">
+                            <span className="filename"> Create - </span>
+                        </i>
+                        Drag source for new green item
+                    </span>
+                    <span draggable="true" onDragStart={(e) => dragStart('Blue', e)} className="factory factory-blue">
+                        <i className="far fa-plus-square">
+                            <span className="filename"> Create - </span>
+                        </i>
+                        Drag source for new blue item
+                    </span>
+                </div>
+
+                <div
+                    style={{ height: '100%' }}
+                    className="inner-col"
+                    onDragOver={gridDragOver}
+                    onDrop={(e) => gridDrop('right', e)}
+                >
+                    <AgGridReact ref={rightGridRef} gridOptions={rightGridOptions} onGridReady={onRightGridReady} />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx
index d38a0bc6f11..38d2b193474 100644
--- a/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx
@@ -13,7 +13,6 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     CsvExportModule,
-    ModuleRegistry,
     RowDragModule,
     RowSelectionModule,
     TextFilterModule,
@@ -21,11 +20,11 @@ import {
 } from 'ag-grid-community';
 import { ExcelExportModule, exportMultipleSheetsAsExcel } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     TextFilterModule,
     RowDragModule,
@@ -34,7 +33,7 @@ ModuleRegistry.registerModules([
     CsvExportModule,
     ExcelExportModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const SportRenderer = (props: CustomCellRendererProps) => {
     return (
@@ -219,13 +218,15 @@ const GridExample = () => {
     );
 
     return (
-        <div className="top-container">
-            {getTopToolBar()}
-            <div className="grid-wrapper">
-                {getGridWrapper(0)}
-                {getGridWrapper(1)}
+        <AgGridProvider modules={modules}>
+            <div className="top-container">
+                {getTopToolBar()}
+                <div className="grid-wrapper">
+                    {getGridWrapper(0)}
+                    {getGridWrapper(1)}
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx
index 9f8b8df9495..69091617819 100644
--- a/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx
@@ -2,20 +2,14 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ContextMenuModule, ExcelExportModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
@@ -23,7 +17,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ExcelExportModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 function getNumber(id: string) {
     const el = document.querySelector(id) as any;
@@ -96,92 +90,94 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="container">
-                <form onSubmit={(e: React.FormEvent<HTMLFormElement>) => onFormSubmit(e)}>
-                    <div className="columns">
-                        <div className="column">
-                            <label className="option" htmlFor="pageOrientation">
-                                Page Orientation =
-                                <select id="pageOrientation">
-                                    <option value="Portrait">Portrait</option>
-                                    <option value="Landscape">Landscape</option>
-                                </select>
-                            </label>
-                            <label className="option" htmlFor="pageSize">
-                                Page Size =
-                                <select id="pageSize">
-                                    <option value="Letter">Letter</option>
-                                    <option value="Letter Small">Letter Small</option>
-                                    <option value="Tabloid">Tabloid</option>
-                                    <option value="Ledger">Ledger</option>
-                                    <option value="Legal">Legal</option>
-                                    <option value="Statement">Statement</option>
-                                    <option value="Executive">Executive</option>
-                                    <option value="A3">A3</option>
-                                    <option value="A4">A4</option>
-                                    <option value="A4 Small">A4 Small</option>
-                                    <option value="A5">A5</option>
-                                    <option value="A6">A6</option>
-                                    <option value="B4">B4</option>
-                                    <option value="B5">B5</option>
-                                    <option value="Folio">Folio</option>
-                                    <option value="Envelope">Envelope</option>
-                                    <option value="Envelope DL">Envelope DL</option>
-                                    <option value="Envelope C5">Envelope C5</option>
-                                    <option value="Envelope B5">Envelope B5</option>
-                                    <option value="Envelope C3">Envelope C3</option>
-                                    <option value="Envelope C4">Envelope C4</option>
-                                    <option value="Envelope C6">Envelope C6</option>
-                                    <option value="Envelope Monarch">Envelope Monarch</option>
-                                    <option value="Japanese Postcard">Japanese Postcard</option>
-                                    <option value="Japanese Double Postcard">Japanese Double Postcard</option>
-                                </select>
-                            </label>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="container">
+                    <form onSubmit={(e: React.FormEvent<HTMLFormElement>) => onFormSubmit(e)}>
+                        <div className="columns">
+                            <div className="column">
+                                <label className="option" htmlFor="pageOrientation">
+                                    Page Orientation =
+                                    <select id="pageOrientation">
+                                        <option value="Portrait">Portrait</option>
+                                        <option value="Landscape">Landscape</option>
+                                    </select>
+                                </label>
+                                <label className="option" htmlFor="pageSize">
+                                    Page Size =
+                                    <select id="pageSize">
+                                        <option value="Letter">Letter</option>
+                                        <option value="Letter Small">Letter Small</option>
+                                        <option value="Tabloid">Tabloid</option>
+                                        <option value="Ledger">Ledger</option>
+                                        <option value="Legal">Legal</option>
+                                        <option value="Statement">Statement</option>
+                                        <option value="Executive">Executive</option>
+                                        <option value="A3">A3</option>
+                                        <option value="A4">A4</option>
+                                        <option value="A4 Small">A4 Small</option>
+                                        <option value="A5">A5</option>
+                                        <option value="A6">A6</option>
+                                        <option value="B4">B4</option>
+                                        <option value="B5">B5</option>
+                                        <option value="Folio">Folio</option>
+                                        <option value="Envelope">Envelope</option>
+                                        <option value="Envelope DL">Envelope DL</option>
+                                        <option value="Envelope C5">Envelope C5</option>
+                                        <option value="Envelope B5">Envelope B5</option>
+                                        <option value="Envelope C3">Envelope C3</option>
+                                        <option value="Envelope C4">Envelope C4</option>
+                                        <option value="Envelope C6">Envelope C6</option>
+                                        <option value="Envelope Monarch">Envelope Monarch</option>
+                                        <option value="Japanese Postcard">Japanese Postcard</option>
+                                        <option value="Japanese Double Postcard">Japanese Double Postcard</option>
+                                    </select>
+                                </label>
+                            </div>
+                            <fieldset className="column margin-container">
+                                <legend>Margins</legend>
+                                <label htmlFor="top">
+                                    Top = <input type="number" id="top" defaultValue="0.75" min="0" step="0.05" />
+                                </label>
+                                <label htmlFor="right">
+                                    Right = <input type="number" id="right" defaultValue="0.7" min="0" step="0.05" />
+                                </label>
+                                <label htmlFor="bottom">
+                                    Bottom = <input type="number" id="bottom" defaultValue="0.75" min="0" step="0.05" />
+                                </label>
+                                <label htmlFor="left">
+                                    Left = <input type="number" id="left" defaultValue="0.7" min="0" step="0.05" />
+                                </label>
+                                <label htmlFor="header">
+                                    Header = <input type="number" id="header" defaultValue="0.3" min="0" step="0.05" />
+                                </label>
+                                <label htmlFor="footer">
+                                    Footer = <input type="number" id="footer" defaultValue="0.3" min="0" step="0.05" />
+                                </label>
+                            </fieldset>
+                        </div>
+                        <div>
+                            <input
+                                type="submit"
+                                style={{ margin: '5px 0px', fontWeight: 'bold' }}
+                                value="Export to Excel"
+                            />
+                        </div>
+                    </form>
+                    <div className="grid-wrapper">
+                        <div style={gridStyle}>
+                            <AgGridReact<IOlympicData>
+                                rowData={rowData}
+                                columnDefs={columnDefs}
+                                defaultColDef={defaultColDef}
+                                popupParent={popupParent}
+                                onGridReady={onGridReady}
+                            />
                         </div>
-                        <fieldset className="column margin-container">
-                            <legend>Margins</legend>
-                            <label htmlFor="top">
-                                Top = <input type="number" id="top" defaultValue="0.75" min="0" step="0.05" />
-                            </label>
-                            <label htmlFor="right">
-                                Right = <input type="number" id="right" defaultValue="0.7" min="0" step="0.05" />
-                            </label>
-                            <label htmlFor="bottom">
-                                Bottom = <input type="number" id="bottom" defaultValue="0.75" min="0" step="0.05" />
-                            </label>
-                            <label htmlFor="left">
-                                Left = <input type="number" id="left" defaultValue="0.7" min="0" step="0.05" />
-                            </label>
-                            <label htmlFor="header">
-                                Header = <input type="number" id="header" defaultValue="0.3" min="0" step="0.05" />
-                            </label>
-                            <label htmlFor="footer">
-                                Footer = <input type="number" id="footer" defaultValue="0.3" min="0" step="0.05" />
-                            </label>
-                        </fieldset>
-                    </div>
-                    <div>
-                        <input
-                            type="submit"
-                            style={{ margin: '5px 0px', fontWeight: 'bold' }}
-                            value="Export to Excel"
-                        />
-                    </div>
-                </form>
-                <div className="grid-wrapper">
-                    <div style={gridStyle}>
-                        <AgGridReact<IOlympicData>
-                            rowData={rowData}
-                            columnDefs={columnDefs}
-                            defaultColDef={defaultColDef}
-                            popupParent={popupParent}
-                            onGridReady={onGridReady}
-                        />
                     </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx
index fe421db2a45..30e94887500 100644
--- a/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx
@@ -2,25 +2,19 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    DateFilterModule,
-    ModuleRegistry,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, DateFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomDateComponent from './customDateComponent';
 import type { IOlympicData } from './interfaces';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     DateFilterModule,
     TextFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -63,16 +57,18 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx
index cc9f8db542b..dc454a03ea3 100644
--- a/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx
@@ -2,22 +2,22 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, FirstDataRenderedEvent, SetFilterHandler } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ContextMenuModule, FiltersToolPanelModule, SetFilterModule } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     SetFilterModule,
     ColumnMenuModule,
     ContextMenuModule,
     FiltersToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const colourCellRenderer = (props: CustomCellRendererProps) => {
     if (!props.value || props.value === '(Select All)') {
@@ -115,43 +115,45 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div>
-                        Case Insensitive:
-                        <button onClick={() => setModel('insensitive')}>API: setModel() - mismatching case</button>
-                        <button onClick={() => getModel('insensitive')}>API: getModel()</button>
-                        <button onClick={() => setFilterValues('insensitive')}>
-                            API: setFilterValues() - mismatching case
-                        </button>
-                        <button onClick={() => getValues('insensitive')}>API: getFilterValues()</button>
-                        <button onClick={() => reset('insensitive')}>Reset</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div>
+                            Case Insensitive:
+                            <button onClick={() => setModel('insensitive')}>API: setModel() - mismatching case</button>
+                            <button onClick={() => getModel('insensitive')}>API: getModel()</button>
+                            <button onClick={() => setFilterValues('insensitive')}>
+                                API: setFilterValues() - mismatching case
+                            </button>
+                            <button onClick={() => getValues('insensitive')}>API: getFilterValues()</button>
+                            <button onClick={() => reset('insensitive')}>Reset</button>
+                        </div>
+                        <div style={{ paddingTop: '10px' }}>
+                            Case Sensitive:
+                            <button onClick={() => setModel('sensitive')}>API: setModel() - mismatching case</button>
+                            <button onClick={() => getModel('sensitive')}>API: getModel()</button>
+                            <button onClick={() => setFilterValues('sensitive')}>
+                                API: setFilterValues() - mismatching case
+                            </button>
+                            <button onClick={() => getValues('sensitive')}>API: getFilterValues()</button>
+                            <button onClick={() => reset('sensitive')}>Reset</button>
+                        </div>
                     </div>
-                    <div style={{ paddingTop: '10px' }}>
-                        Case Sensitive:
-                        <button onClick={() => setModel('sensitive')}>API: setModel() - mismatching case</button>
-                        <button onClick={() => getModel('sensitive')}>API: getModel()</button>
-                        <button onClick={() => setFilterValues('sensitive')}>
-                            API: setFilterValues() - mismatching case
-                        </button>
-                        <button onClick={() => getValues('sensitive')}>API: getFilterValues()</button>
-                        <button onClick={() => reset('sensitive')}>Reset</button>
-                    </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        sideBar={'filters'}
-                        onFirstDataRendered={onFirstDataRendered}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            sideBar={'filters'}
+                            onFirstDataRendered={onFirstDataRendered}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx
index ca412aabfa2..c9649ce21e9 100644
--- a/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx
@@ -2,7 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, FirstDataRenderedEvent } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import {
     ColumnMenuModule,
     ColumnsToolPanelModule,
@@ -11,9 +11,9 @@ import {
     SetFilterModule,
 } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     SetFilterModule,
 
@@ -22,7 +22,7 @@ ModuleRegistry.registerModules([
     ColumnsToolPanelModule,
     FiltersToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const colourCellRenderer = (props: CustomCellRendererProps) => {
     if (!props.value || props.value === '(Select All)') {
@@ -39,10 +39,12 @@ const colourCellRenderer = (props: CustomCellRendererProps) => {
         backgroundColor: props.value.toLowerCase(),
     };
     return (
-        <React.Fragment>
-            <div style={styles} />
-            {props.value}
-        </React.Fragment>
+        <AgGridProvider modules={modules}>
+            <React.Fragment>
+                <div style={styles} />
+                {props.value}
+            </React.Fragment>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx
index b3f8415c00e..e6045f7dbb0 100644
--- a/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx
@@ -3,23 +3,14 @@
 import React, { ChangeEvent, KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    ColDef,
-    FindChangedEvent,
-    FindOptions,
-    GridReadyEvent,
-    ModuleRegistry,
-    PaginationModule,
-    PinnedRowModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import type { ColDef, FindChangedEvent, FindOptions, GridReadyEvent } from 'ag-grid-community';
+import { ClientSideRowModelModule, PaginationModule, PinnedRowModule, ValidationModule } from 'ag-grid-community';
 import { FindModule, RowGroupingModule, RowGroupingPanelModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     FindModule,
     RowGroupingModule,
     RowGroupingPanelModule,
@@ -27,7 +18,7 @@ ModuleRegistry.registerModules([
     ClientSideRowModelModule,
     PaginationModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -137,64 +128,66 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div className="example-controls">
-                        <label>
-                            <span>caseSensitive:</span>
-                            <input
-                                id="caseSensitive"
-                                type="checkbox"
-                                onChange={toggleCaseSensitive}
-                                checked={findOptions.caseSensitive}
-                            />
-                        </label>
-                        <label>
-                            <span>currentPageOnly:</span>
-                            <input
-                                id="currentPageOnly"
-                                type="checkbox"
-                                onChange={toggleCurrentPageOnly}
-                                checked={findOptions.currentPageOnly}
-                            />
-                        </label>
-                    </div>
-                    <div className="example-controls">
-                        <span>Find:</span>
-                        <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
-                        <button onClick={previous}>Previous</button>
-                        <button onClick={next}>Next</button>
-                        <span>{activeMatchNum}</span>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div className="example-controls">
+                            <label>
+                                <span>caseSensitive:</span>
+                                <input
+                                    id="caseSensitive"
+                                    type="checkbox"
+                                    onChange={toggleCaseSensitive}
+                                    checked={findOptions.caseSensitive}
+                                />
+                            </label>
+                            <label>
+                                <span>currentPageOnly:</span>
+                                <input
+                                    id="currentPageOnly"
+                                    type="checkbox"
+                                    onChange={toggleCurrentPageOnly}
+                                    checked={findOptions.currentPageOnly}
+                                />
+                            </label>
+                        </div>
+                        <div className="example-controls">
+                            <span>Find:</span>
+                            <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
+                            <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
+                            <span>{activeMatchNum}</span>
+                        </div>
+                        <div className="example-controls">
+                            <span>Go to match:</span>
+                            <input type="number" ref={goToRef} />
+                            <button onClick={goToFind}>Go To</button>
+                        </div>
+                        <div>{activeMatch}</div>
                     </div>
-                    <div className="example-controls">
-                        <span>Go to match:</span>
-                        <input type="number" ref={goToRef} />
-                        <button onClick={goToFind}>Go To</button>
-                    </div>
-                    <div>{activeMatch}</div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        pinnedTopRowData={pinnedTopRowData}
-                        pinnedBottomRowData={pinnedBottomRowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        rowGroupPanelShow={'always'}
-                        pagination={true}
-                        paginationPageSize={5}
-                        paginationPageSizeSelector={paginationPageSizeSelector}
-                        findSearchValue={findSearchValue}
-                        findOptions={findOptions}
-                        onGridReady={onGridReady}
-                        onFindChanged={onFindChanged}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            pinnedTopRowData={pinnedTopRowData}
+                            pinnedBottomRowData={pinnedBottomRowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            rowGroupPanelShow={'always'}
+                            pagination={true}
+                            paginationPageSize={5}
+                            paginationPageSizeSelector={paginationPageSizeSelector}
+                            findSearchValue={findSearchValue}
+                            findOptions={findOptions}
+                            onGridReady={onGridReady}
+                            onFindChanged={onFindChanged}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx
index 6ca634ae7fd..3727cec2066 100644
--- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx
@@ -1,28 +1,29 @@
 'use client';
 
-import React, { type ChangeEvent, KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+    type ChangeEvent,
+    type KeyboardEventHandler,
+    StrictMode,
+    useCallback,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    ColDef,
-    FindChangedEvent,
-    GetFindTextParams,
-    GridReadyEvent,
-    ModuleRegistry,
-    ValidationModule,
-} from 'ag-grid-community';
+import type { ColDef, FindChangedEvent, GetFindTextParams, GridReadyEvent } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { FindModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import FindRenderer from './findRenderer';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     FindModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -68,7 +69,7 @@ const GridExample = () => {
         setFindSearchValue(event.target.value);
     }, []);
 
-    const onKeyDown = useCallback((event: KeyboardEvent) => {
+    const onKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>((event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
             const backwards = event.shiftKey;
@@ -89,31 +90,33 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div className="example-controls">
-                        <span>Find:</span>
-                        <input type="text" defaultValue="e" onInput={onInput} onKeyDown={onKeyDown} />
-                        <button onClick={previous}>Previous</button>
-                        <button onClick={next}>Next</button>
-                        <span>{activeMatchNum}</span>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div className="example-controls">
+                            <span>Find:</span>
+                            <input type="text" defaultValue="e" onInput={onInput} onKeyDown={onKeyDown} />
+                            <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
+                            <span>{activeMatchNum}</span>
+                        </div>
                     </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        findSearchValue={findSearchValue}
-                        onGridReady={onGridReady}
-                        onFindChanged={onFindChanged}
-                        onFirstDataRendered={onFirstDataRendered}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            findSearchValue={findSearchValue}
+                            onGridReady={onGridReady}
+                            onFindChanged={onFindChanged}
+                            onFirstDataRendered={onFirstDataRendered}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx
index 8ccc355cdb6..8cd4b9ce50e 100644
--- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx
@@ -3,8 +3,7 @@
 import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
+import type {
     ColDef,
     FindChangedEvent,
     FindDetailCellRendererParams,
@@ -12,23 +11,21 @@ import {
     FirstDataRenderedEvent,
     GetFindMatchesParams,
     GridReadyEvent,
-    ModuleRegistry,
-    RowApiModule,
-    ValidationModule,
 } from 'ag-grid-community';
+import { ClientSideRowModelModule, RowApiModule, ValidationModule } from 'ag-grid-community';
 import { FindModule, MasterDetailModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import DetailCellRenderer from './detailCellRenderer';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     FindModule,
     ClientSideRowModelModule,
     MasterDetailModule,
     RowApiModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -114,41 +111,43 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div className="example-controls">
-                        <span>Find:</span>
-                        <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
-                        <button onClick={previous}>Previous</button>
-                        <button onClick={next}>Next</button>
-                        <span>{activeMatchNum}</span>
-                    </div>
-                    <div className="example-controls">
-                        <span>Go to match:</span>
-                        <input type="number" ref={goToRef} />
-                        <button onClick={goToFind}>Go To</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div className="example-controls">
+                            <span>Find:</span>
+                            <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
+                            <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
+                            <span>{activeMatchNum}</span>
+                        </div>
+                        <div className="example-controls">
+                            <span>Go to match:</span>
+                            <input type="number" ref={goToRef} />
+                            <button onClick={goToFind}>Go To</button>
+                        </div>
                     </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        masterDetail
-                        detailCellRenderer={detailCellRenderer}
-                        detailCellRendererParams={detailCellRendererParams}
-                        detailRowHeight={100}
-                        findSearchValue={findSearchValue}
-                        findOptions={findOptions}
-                        onGridReady={onGridReady}
-                        onFindChanged={onFindChanged}
-                        onFirstDataRendered={onFirstDataRendered}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            masterDetail
+                            detailCellRenderer={detailCellRenderer}
+                            detailCellRendererParams={detailCellRendererParams}
+                            detailRowHeight={100}
+                            findSearchValue={findSearchValue}
+                            findOptions={findOptions}
+                            onGridReady={onGridReady}
+                            onFindChanged={onFindChanged}
+                            onFirstDataRendered={onFirstDataRendered}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx
index 917153b71c2..b7c8320a796 100644
--- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx
@@ -3,33 +3,30 @@
 import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
+import type {
     ColDef,
     FindChangedEvent,
     FindOptions,
     FirstDataRenderedEvent,
-    type GetDetailRowDataParams,
-    type GetFindMatchesParams,
+    GetDetailRowDataParams,
+    GetFindMatchesParams,
     GetRowIdParams,
     IDetailCellRendererParams,
-    ModuleRegistry,
-    RowApiModule,
-    ValidationModule,
 } from 'ag-grid-community';
+import { ClientSideRowModelModule, RowApiModule, ValidationModule } from 'ag-grid-community';
 import { FindModule, MasterDetailModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     FindModule,
     ClientSideRowModelModule,
     MasterDetailModule,
     RowApiModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -157,40 +154,42 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div className="example-controls">
-                        <span>Find:</span>
-                        <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
-                        <button onClick={previous}>Previous</button>
-                        <button onClick={next}>Next</button>
-                        <span>{activeMatchNum}</span>
-                    </div>
-                    <div className="example-controls">
-                        <span>Go to match:</span>
-                        <input type="number" ref={goToRef} />
-                        <button onClick={goToFind}>Go To</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div className="example-controls">
+                            <span>Find:</span>
+                            <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
+                            <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
+                            <span>{activeMatchNum}</span>
+                        </div>
+                        <div className="example-controls">
+                            <span>Go to match:</span>
+                            <input type="number" ref={goToRef} />
+                            <button onClick={goToFind}>Go To</button>
+                        </div>
                     </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        masterDetail
-                        getRowId={getRowId}
-                        detailCellRendererParams={detailCellRendererParams}
-                        findOptions={findOptions}
-                        findSearchValue={findSearchValue}
-                        onFindChanged={onFindChanged}
-                        onFirstDataRendered={onFirstDataRendered}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            masterDetail
+                            getRowId={getRowId}
+                            detailCellRendererParams={detailCellRendererParams}
+                            findOptions={findOptions}
+                            findSearchValue={findSearchValue}
+                            onFindChanged={onFindChanged}
+                            onFirstDataRendered={onFirstDataRendered}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx
index c6cf2a2c264..3c10259c50c 100644
--- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx
@@ -3,29 +3,27 @@
 import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
+import type {
     ColDef,
     FindChangedEvent,
     FindFullWidthCellRendererParams,
     GetFindMatchesParams,
     IsFullWidthRowParams,
-    ModuleRegistry,
     RowHeightParams,
-    ValidationModule,
 } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { FindModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData, getLatinText } from './data';
 import FullWidthCellRenderer from './fullWidthCellRenderer';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     FindModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -121,39 +119,41 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div className="example-controls">
-                        <span>Find:</span>
-                        <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
-                        <button onClick={previous}>Previous</button>
-                        <button onClick={next}>Next</button>
-                        <span>{activeMatchNum}</span>
-                    </div>
-                    <div className="example-controls">
-                        <span>Go to match:</span>
-                        <input type="number" ref={goToRef} />
-                        <button onClick={goToFind}>Go To</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div className="example-controls">
+                            <span>Find:</span>
+                            <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
+                            <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
+                            <span>{activeMatchNum}</span>
+                        </div>
+                        <div className="example-controls">
+                            <span>Go to match:</span>
+                            <input type="number" ref={goToRef} />
+                            <button onClick={goToFind}>Go To</button>
+                        </div>
                     </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        getRowHeight={getRowHeight}
-                        isFullWidthRow={isFullWidthRow}
-                        fullWidthCellRenderer={fullWidthCellRenderer}
-                        fullWidthCellRendererParams={fullWidthCellRendererParams}
-                        findSearchValue={findSearchValue}
-                        onFindChanged={onFindChanged}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            getRowHeight={getRowHeight}
+                            isFullWidthRow={isFullWidthRow}
+                            fullWidthCellRenderer={fullWidthCellRenderer}
+                            fullWidthCellRendererParams={fullWidthCellRendererParams}
+                            findSearchValue={findSearchValue}
+                            onFindChanged={onFindChanged}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx
index 119c93e845f..c8066002fc9 100644
--- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx
@@ -3,24 +3,18 @@
 import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    ColDef,
-    FindChangedEvent,
-    GridReadyEvent,
-    ModuleRegistry,
-    ValidationModule,
-} from 'ag-grid-community';
+import type { ColDef, FindChangedEvent, GridReadyEvent } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { FindModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     FindModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -89,35 +83,37 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <div className="example-controls">
-                        <span>Find:</span>
-                        <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
-                        <button onClick={previous}>Previous</button>
-                        <button onClick={next}>Next</button>
-                        <span>{activeMatchNum}</span>
-                    </div>
-                    <div className="example-controls">
-                        <span>Go to match:</span>
-                        <input type="number" ref={goToRef} />
-                        <button onClick={goToFind}>Go To</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <div className="example-controls">
+                            <span>Find:</span>
+                            <input type="text" onInput={onInput} onKeyDown={onKeyDown} />
+                            <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
+                            <span>{activeMatchNum}</span>
+                        </div>
+                        <div className="example-controls">
+                            <span>Go to match:</span>
+                            <input type="number" ref={goToRef} />
+                            <button onClick={goToFind}>Go To</button>
+                        </div>
                     </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        findSearchValue={findSearchValue}
-                        onGridReady={onGridReady}
-                        onFindChanged={onFindChanged}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            findSearchValue={findSearchValue}
+                            onGridReady={onGridReady}
+                            onFindChanged={onFindChanged}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx
index d2877556797..9b63f2164cc 100644
--- a/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx
@@ -2,10 +2,8 @@ import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -41,9 +39,11 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <AgGridReact rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <AgGridReact rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx
index 35f8444f9e8..9080a3ddadb 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx
@@ -2,17 +2,17 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridReadyEvent } from 'ag-grid-community';
-import { ClientSideRowModelModule, ColumnApiModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ColumnApiModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ColumnApiModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -46,32 +46,34 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="test-container">
-                <div className="test-header">
-                    <div style={{ marginBottom: '1rem' }}>
-                        <input type="checkbox" id="pinFirstColumnOnLoad" />
-                        <label htmlFor="pinFirstColumnOnLoad">Pin first column on load</label>
-                    </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="test-container">
+                    <div className="test-header">
+                        <div style={{ marginBottom: '1rem' }}>
+                            <input type="checkbox" id="pinFirstColumnOnLoad" />
+                            <label htmlFor="pinFirstColumnOnLoad">Pin first column on load</label>
+                        </div>
 
-                    <div style={{ marginBottom: '1rem' }}>
-                        <button id="reloadGridButton" onClick={reloadGrid}>
-                            Reload Grid
-                        </button>
+                        <div style={{ marginBottom: '1rem' }}>
+                            <button id="reloadGridButton" onClick={reloadGrid}>
+                                Reload Grid
+                            </button>
+                        </div>
                     </div>
-                </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        key={gridKey}
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        onGridReady={onGridReady}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            key={gridKey}
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            onGridReady={onGridReady}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx
index 934facee4c8..a62fa362436 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx
@@ -1,18 +1,15 @@
-import React, { StrictMode, useCallback, useEffect, useRef, useState } from 'react';
+import React, { StrictMode, useCallback, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import type { ColDef, FirstDataRenderedEvent, RowDataUpdatedEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
+import type { FirstDataRenderedEvent, RowDataUpdatedEvent } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { fetchDataAsync } from './data';
 import type { TAthlete } from './data';
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 const updateRowCount = (id: string) => {
     const element = document.querySelector(`#${id} > .value`);
@@ -58,31 +55,33 @@ const GridExample = () => {
     useEffect(reloadData, []);
 
     return (
-        <div className="test-container">
-            <div className="test-header">
-                <div id="firstDataRendered">
-                    First Data Rendered: <span className="value">-</span>
+        <AgGridProvider modules={modules}>
+            <div className="test-container">
+                <div className="test-header">
+                    <div id="firstDataRendered">
+                        First Data Rendered: <span className="value">-</span>
+                    </div>
+                    <div id="rowDataUpdated">
+                        Row Data Updated: <span className="value">-</span>
+                    </div>
+                    <div>
+                        <button disabled={loading} onClick={reloadData}>
+                            Reload Data
+                        </button>
+                    </div>
                 </div>
-                <div id="rowDataUpdated">
-                    Row Data Updated: <span className="value">-</span>
-                </div>
-                <div>
-                    <button disabled={loading} onClick={reloadData}>
-                        Reload Data
-                    </button>
-                </div>
-            </div>
 
-            <div style={{ height: '100%' }}>
-                <AgGridReact
-                    loading={loading}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    onFirstDataRendered={onFirstDataRendered}
-                    onRowDataUpdated={onRowDataUpdated}
-                />
+                <div style={{ height: '100%' }}>
+                    <AgGridReact
+                        loading={loading}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        onFirstDataRendered={onFirstDataRendered}
+                        onRowDataUpdated={onRowDataUpdated}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx
index 1ae0368a73e..eaea878e7f3 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx
@@ -2,15 +2,12 @@ import React, { StrictMode, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -57,18 +54,20 @@ const GridExample = () => {
     };
 
     return (
-        <div className="example-wrapper">
-            <div style={{ marginBottom: '5px' }}>
-                <button onClick={() => fillLarge()}>Fill 100%</button>
-                <button onClick={() => fillMedium()}>Fill 60%</button>
-                <button onClick={() => fillExact()}>Exactly 400 x 400 pixels</button>
-            </div>
-            <div className="grid-wrapper">
-                <div style={style}>
-                    <AgGridReact ref={gridRef} rowData={data} loading={loading} columnDefs={columnDefs} />
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div style={{ marginBottom: '5px' }}>
+                    <button onClick={() => fillLarge()}>Fill 100%</button>
+                    <button onClick={() => fillMedium()}>Fill 60%</button>
+                    <button onClick={() => fillExact()}>Exactly 400 x 400 pixels</button>
+                </div>
+                <div className="grid-wrapper">
+                    <div style={style}>
+                        <AgGridReact ref={gridRef} rowData={data} loading={loading} columnDefs={columnDefs} />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts
index 87ad6d0a9f9..a8208fa3e23 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts
+++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts
@@ -3,6 +3,7 @@ import { Component, signal } from '@angular/core';
 
 import { AgGridAngular } from 'ag-grid-angular';
 import type {
+    AutoGroupColumnDef,
     ColDef,
     GridApi,
     GridOptions,
@@ -101,7 +102,7 @@ export class AppComponent {
         enablePivot: true,
         enableValue: true,
     };
-    public autoGroupColumnDef: ColDef = { minWidth: 200 };
+    public autoGroupColumnDef: AutoGroupColumnDef = { minWidth: 200 };
     public rowSelection: RowSelectionOptions = {
         mode: 'multiRow',
     };
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx
index 0f7bec65d9a..41387cece6f 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx
@@ -2,6 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type {
+    AutoGroupColumnDef,
     ColDef,
     GridPreDestroyedEvent,
     GridState,
@@ -11,7 +12,6 @@ import type {
 import {
     ClientSideRowModelModule,
     GridStateModule,
-    ModuleRegistry,
     NumberFilterModule,
     PaginationModule,
     RowSelectionModule,
@@ -24,13 +24,13 @@ import {
     PivotModule,
     SetFilterModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import './styles.css';
 import { useFetchJson } from './useFetchJson';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     RowSelectionModule,
     GridStateModule,
@@ -42,7 +42,7 @@ ModuleRegistry.registerModules([
     CellSelectionModule,
     PivotModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact<IOlympicData>>(null);
@@ -70,7 +70,7 @@ const GridExample = () => {
             enableValue: true,
         };
     }, []);
-    const autoGroupColumnDef = useMemo<ColDef>(() => {
+    const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
         return { minWidth: 200 };
     }, []);
     const rowSelection = useMemo<RowSelectionOptions>(
@@ -108,35 +108,37 @@ const GridExample = () => {
     }, [currentState]);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div>
-                    <span className="button-group">
-                        <button onClick={reloadGrid}>Recreate Grid with Current State</button>
-                        <button onClick={printState}>Print State</button>
-                    </span>
-                </div>
-                <div style={gridStyle}>
-                    {gridVisible && (
-                        <AgGridReact<IOlympicData>
-                            ref={gridRef}
-                            rowData={data}
-                            loading={loading}
-                            columnDefs={columnDefs}
-                            defaultColDef={defaultColDef}
-                            autoGroupColumnDef={autoGroupColumnDef}
-                            sideBar={true}
-                            pagination={true}
-                            rowSelection={rowSelection}
-                            suppressColumnMoveAnimation={true}
-                            initialState={initialState}
-                            onGridPreDestroyed={onGridPreDestroyed}
-                            onStateUpdated={onStateUpdated}
-                        />
-                    )}
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div>
+                        <span className="button-group">
+                            <button onClick={reloadGrid}>Recreate Grid with Current State</button>
+                            <button onClick={printState}>Print State</button>
+                        </span>
+                    </div>
+                    <div style={gridStyle}>
+                        {gridVisible && (
+                            <AgGridReact<IOlympicData>
+                                ref={gridRef}
+                                rowData={data}
+                                loading={loading}
+                                columnDefs={columnDefs}
+                                defaultColDef={defaultColDef}
+                                autoGroupColumnDef={autoGroupColumnDef}
+                                sideBar={true}
+                                pagination={true}
+                                rowSelection={rowSelection}
+                                suppressColumnMoveAnimation={true}
+                                initialState={initialState}
+                                onGridPreDestroyed={onGridPreDestroyed}
+                                onStateUpdated={onStateUpdated}
+                            />
+                        )}
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts
index 7623b4d2eea..f8d92063d59 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts
+++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts
@@ -3,6 +3,7 @@ import { Component, signal } from '@angular/core';
 
 import { AgGridAngular } from 'ag-grid-angular';
 import type {
+    AutoGroupColumnDef,
     ColDef,
     GridApi,
     GridOptions,
@@ -102,7 +103,7 @@ export class AppComponent {
         enablePivot: true,
         enableValue: true,
     };
-    public autoGroupColumnDef: ColDef = { minWidth: 200 };
+    public autoGroupColumnDef: AutoGroupColumnDef = { minWidth: 200 };
     public rowSelection: RowSelectionOptions = {
         mode: 'multiRow',
     };
diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx
index 80738810395..6b98aab636c 100644
--- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx
@@ -2,6 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type {
+    AutoGroupColumnDef,
     ColDef,
     GridPreDestroyedEvent,
     GridReadyEvent,
@@ -12,7 +13,6 @@ import type {
 import {
     ClientSideRowModelModule,
     GridStateModule,
-    ModuleRegistry,
     NumberFilterModule,
     PaginationModule,
     RowSelectionModule,
@@ -25,12 +25,12 @@ import {
     PivotModule,
     SetFilterModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IOlympicData } from './interfaces';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     RowSelectionModule,
     GridStateModule,
@@ -42,7 +42,7 @@ ModuleRegistry.registerModules([
     CellSelectionModule,
     PivotModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact<IOlympicData>>(null);
@@ -71,7 +71,7 @@ const GridExample = () => {
             enableValue: true,
         };
     }, []);
-    const autoGroupColumnDef = useMemo<ColDef>(() => {
+    const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
         return { minWidth: 200 };
     }, []);
     const rowSelection = useMemo<RowSelectionOptions>(
@@ -125,36 +125,38 @@ const GridExample = () => {
     }, [savedState]);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div>
-                    <span className="button-group">
-                        <button onClick={saveState}>Save State</button>
-                        <button onClick={reloadGrid}>Recreate Grid with No State</button>
-                        <button onClick={setState}>Set State</button>
-                        <button onClick={printState}>Print State</button>
-                    </span>
-                </div>
-                <div style={gridStyle}>
-                    {gridVisible && (
-                        <AgGridReact<IOlympicData>
-                            ref={gridRef}
-                            rowData={rowData}
-                            columnDefs={columnDefs}
-                            defaultColDef={defaultColDef}
-                            autoGroupColumnDef={autoGroupColumnDef}
-                            sideBar={true}
-                            pagination={true}
-                            rowSelection={rowSelection}
-                            suppressColumnMoveAnimation={true}
-                            onGridReady={onGridReady}
-                            onGridPreDestroyed={onGridPreDestroyed}
-                            onStateUpdated={onStateUpdated}
-                        />
-                    )}
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div>
+                        <span className="button-group">
+                            <button onClick={saveState}>Save State</button>
+                            <button onClick={reloadGrid}>Recreate Grid with No State</button>
+                            <button onClick={setState}>Set State</button>
+                            <button onClick={printState}>Print State</button>
+                        </span>
+                    </div>
+                    <div style={gridStyle}>
+                        {gridVisible && (
+                            <AgGridReact<IOlympicData>
+                                ref={gridRef}
+                                rowData={rowData}
+                                columnDefs={columnDefs}
+                                defaultColDef={defaultColDef}
+                                autoGroupColumnDef={autoGroupColumnDef}
+                                sideBar={true}
+                                pagination={true}
+                                rowSelection={rowSelection}
+                                suppressColumnMoveAnimation={true}
+                                onGridReady={onGridReady}
+                                onGridPreDestroyed={onGridPreDestroyed}
+                                onStateUpdated={onStateUpdated}
+                            />
+                        )}
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx
index 2bbb29a2ddd..0d0fb655ab8 100644
--- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx
@@ -2,21 +2,15 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GetRowIdParams, GridReadyEvent, IDatasource } from 'ag-grid-community';
-import {
-    InfiniteRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    PaginationModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { InfiniteRowModelModule, NumberFilterModule, PaginationModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { countries } from './countries';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     PaginationModule,
     InfiniteRowModelModule,
@@ -25,7 +19,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const filterParams = { values: countries() };
 
@@ -202,22 +196,24 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowModelType={'infinite'}
-                    cacheOverflowSize={2}
-                    maxConcurrentDatasourceRequests={2}
-                    infiniteInitialRowCount={1}
-                    maxBlocksInCache={2}
-                    pagination={true}
-                    getRowId={getRowId}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowModelType={'infinite'}
+                        cacheOverflowSize={2}
+                        maxConcurrentDatasourceRequests={2}
+                        infiniteInitialRowCount={1}
+                        maxBlocksInCache={2}
+                        pagination={true}
+                        getRowId={getRowId}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx
index b019429ca93..d7511c6582b 100644
--- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx
@@ -2,20 +2,14 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GetRowIdParams, GridReadyEvent, IDatasource } from 'ag-grid-community';
-import {
-    InfiniteRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    PaginationModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { InfiniteRowModelModule, NumberFilterModule, PaginationModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { countries } from './countries';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     PaginationModule,
     InfiniteRowModelModule,
@@ -24,7 +18,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const filterParams = { values: countries() };
 
@@ -198,24 +192,26 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowModelType={'infinite'}
-                    cacheBlockSize={100}
-                    cacheOverflowSize={2}
-                    maxConcurrentDatasourceRequests={2}
-                    infiniteInitialRowCount={1}
-                    maxBlocksInCache={2}
-                    pagination={true}
-                    paginationAutoPageSize={true}
-                    getRowId={getRowId}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowModelType={'infinite'}
+                        cacheBlockSize={100}
+                        cacheOverflowSize={2}
+                        maxConcurrentDatasourceRequests={2}
+                        infiniteInitialRowCount={1}
+                        maxBlocksInCache={2}
+                        pagination={true}
+                        paginationAutoPageSize={true}
+                        getRowId={getRowId}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx
index 1304b4855bc..4f98e409d5d 100644
--- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx
@@ -11,22 +11,21 @@ import type {
 } from 'ag-grid-community';
 import {
     InfiniteRowModelModule,
-    ModuleRegistry,
     RowApiModule,
     RowStyleModule,
     ScrollApiModule,
     ValidationModule,
 } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
+const modules = [
     RowApiModule,
     ScrollApiModule,
     RowStyleModule,
     InfiniteRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const valueFormatter = function (params: ValueFormatterParams) {
     if (typeof params.value === 'number') {
@@ -208,40 +207,42 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-                <div style={{ marginBottom: '10px' }}>
-                    <button onClick={() => insertItemsAt2AndRefresh(5)}>Insert Rows</button>
-                    <button onClick={() => removeItem(3, 10)}>Delete Rows</button>
-                    <button onClick={setRowCountTo200}>Set Row Count</button>
-                    <button onClick={rowsAndMaxFound}>Print Info</button>
-                    <button onClick={jumpTo500}>Jump to 500</button>
-                </div>
-                <div style={{ marginBottom: '10px' }}>
-                    <button onClick={setPricesHigh}>Set Prices High</button>
-                    <button onClick={setPricesLow}>Set Prices Low</button>
-                    <button onClick={refreshCache}>Refresh Cache</button>
-                    <button onClick={purgeCache}>Purge Cache</button>
-                </div>
-                <div style={{ flexGrow: '1' }}>
-                    <div style={gridStyle}>
-                        <AgGridReact
-                            ref={gridRef}
-                            columnDefs={columnDefs}
-                            datasource={datasource}
-                            defaultColDef={defaultColDef}
-                            rowModelType={'infinite'}
-                            maxBlocksInCache={2}
-                            infiniteInitialRowCount={500}
-                            maxConcurrentDatasourceRequests={2}
-                            getRowId={getRowId}
-                            getRowStyle={getRowStyle}
-                            onGridReady={onGridReady}
-                        />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                    <div style={{ marginBottom: '10px' }}>
+                        <button onClick={() => insertItemsAt2AndRefresh(5)}>Insert Rows</button>
+                        <button onClick={() => removeItem(3, 10)}>Delete Rows</button>
+                        <button onClick={setRowCountTo200}>Set Row Count</button>
+                        <button onClick={rowsAndMaxFound}>Print Info</button>
+                        <button onClick={jumpTo500}>Jump to 500</button>
+                    </div>
+                    <div style={{ marginBottom: '10px' }}>
+                        <button onClick={setPricesHigh}>Set Prices High</button>
+                        <button onClick={setPricesLow}>Set Prices Low</button>
+                        <button onClick={refreshCache}>Refresh Cache</button>
+                        <button onClick={purgeCache}>Purge Cache</button>
+                    </div>
+                    <div style={{ flexGrow: '1' }}>
+                        <div style={gridStyle}>
+                            <AgGridReact
+                                ref={gridRef}
+                                columnDefs={columnDefs}
+                                datasource={datasource}
+                                defaultColDef={defaultColDef}
+                                rowModelType={'infinite'}
+                                maxBlocksInCache={2}
+                                infiniteInitialRowCount={500}
+                                maxConcurrentDatasourceRequests={2}
+                                getRowId={getRowId}
+                                getRowStyle={getRowStyle}
+                                onGridReady={onGridReady}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx
index b3dd81f3853..e0c0a68d0b8 100644
--- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx
@@ -2,20 +2,14 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GetRowIdParams, GridReadyEvent, IDatasource, RowSelectionOptions } from 'ag-grid-community';
-import {
-    InfiniteRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    RowSelectionModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { InfiniteRowModelModule, NumberFilterModule, RowSelectionModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule } from 'ag-grid-enterprise';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getCountries } from './countries';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     RowSelectionModule,
     InfiniteRowModelModule,
@@ -24,7 +18,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const filterParams = { values: getCountries() };
 
@@ -206,23 +200,25 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowSelection={rowSelection}
-                    rowModelType={'infinite'}
-                    cacheBlockSize={100}
-                    cacheOverflowSize={2}
-                    maxConcurrentDatasourceRequests={2}
-                    infiniteInitialRowCount={1}
-                    maxBlocksInCache={2}
-                    getRowId={getRowId}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowSelection={rowSelection}
+                        rowModelType={'infinite'}
+                        cacheBlockSize={100}
+                        cacheOverflowSize={2}
+                        maxConcurrentDatasourceRequests={2}
+                        infiniteInitialRowCount={1}
+                        maxBlocksInCache={2}
+                        getRowId={getRowId}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx
index 79fce1e3ec2..070c5734e95 100644
--- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx
@@ -2,14 +2,11 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridReadyEvent, IDatasource } from 'ag-grid-community';
-import { InfiniteRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { InfiniteRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
-    InfiniteRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [InfiniteRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -78,22 +75,24 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowBuffer={0}
-                    rowModelType={'infinite'}
-                    cacheBlockSize={100}
-                    cacheOverflowSize={2}
-                    maxConcurrentDatasourceRequests={1}
-                    infiniteInitialRowCount={1000}
-                    maxBlocksInCache={10}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowBuffer={0}
+                        rowModelType={'infinite'}
+                        cacheBlockSize={100}
+                        cacheOverflowSize={2}
+                        maxConcurrentDatasourceRequests={1}
+                        infiniteInitialRowCount={1000}
+                        maxBlocksInCache={10}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx
index 1e3f6598567..b487d44a6d2 100644
--- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx
@@ -2,15 +2,15 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridReadyEvent, IDatasource, IRowNode, RowSelectionOptions } from 'ag-grid-community';
-import { InfiniteRowModelModule, ModuleRegistry, RowSelectionModule, ValidationModule } from 'ag-grid-community';
+import { InfiniteRowModelModule, RowSelectionModule, ValidationModule } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
+const modules = [
     RowSelectionModule,
     InfiniteRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const rowSelection: RowSelectionOptions = {
     mode: 'multiRow',
@@ -88,23 +88,25 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowBuffer={0}
-                    rowSelection={rowSelection}
-                    rowModelType={'infinite'}
-                    cacheBlockSize={100}
-                    cacheOverflowSize={2}
-                    maxConcurrentDatasourceRequests={2}
-                    infiniteInitialRowCount={1}
-                    maxBlocksInCache={2}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowBuffer={0}
+                        rowSelection={rowSelection}
+                        rowModelType={'infinite'}
+                        cacheBlockSize={100}
+                        cacheOverflowSize={2}
+                        maxConcurrentDatasourceRequests={2}
+                        infiniteInitialRowCount={1}
+                        maxBlocksInCache={2}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx
index 43e86496304..6fe6a12be98 100644
--- a/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx
@@ -3,20 +3,20 @@ import React, { StrictMode, useCallback, useEffect, useMemo, useRef, useState }
 import { createRoot } from 'react-dom/client';
 
 import type { ChartRef, ColDef, GridReadyEvent } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { ColumnMenuModule, ContextMenuModule, IntegratedChartsModule, RowGroupingModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     IntegratedChartsModule.with(AgChartsEnterpriseModule),
     ColumnMenuModule,
     ContextMenuModule,
     RowGroupingModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -66,36 +66,38 @@ const GridExample = () => {
     }, [chartRef]);
 
     return (
-        <div style={containerStyle}>
-            <div id="container">
-                <div style={gridStyle}>
-                    <AgGridReact
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        cellSelection={true}
-                        enableCharts={true}
-                        popupParent={popupParent}
-                        createChartContainer={updateChartParams}
-                        onGridReady={onGridReady}
-                    />
-                    <div ref={chartPlaceholderRef} className="chart-wrapper">
-                        {chartRef ? (
-                            <div key={chartRef.chartId}>
-                                <div className="chart-wrapper-top">
-                                    <h2 className="chart-wrapper-title">
-                                        Chart created at {new Date().toLocaleString()}
-                                    </h2>
-                                    <button onClick={() => updateChartParams(undefined)}>Destroy Chart</button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div id="container">
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            cellSelection={true}
+                            enableCharts={true}
+                            popupParent={popupParent}
+                            createChartContainer={updateChartParams}
+                            onGridReady={onGridReady}
+                        />
+                        <div ref={chartPlaceholderRef} className="chart-wrapper">
+                            {chartRef ? (
+                                <div key={chartRef.chartId}>
+                                    <div className="chart-wrapper-top">
+                                        <h2 className="chart-wrapper-title">
+                                            Chart created at {new Date().toLocaleString()}
+                                        </h2>
+                                        <button onClick={() => updateChartParams(undefined)}>Destroy Chart</button>
+                                    </div>
                                 </div>
-                            </div>
-                        ) : (
-                            <div className="chart-placeholder">Chart will be displayed here.</div>
-                        )}
+                            ) : (
+                                <div className="chart-placeholder">Chart will be displayed here.</div>
+                            )}
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx
index 073b0965091..5c8457639bf 100644
--- a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx
@@ -2,10 +2,8 @@ import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, ColGroupDef, ValueGetterParams } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 const CustomButtonComponent = () => {
     return <button onClick={() => console.log('clicked')}>Push Me!</button>;
@@ -31,11 +29,13 @@ const GridExample = () => {
         { field: 'button', cellRenderer: CustomButtonComponent, flex: 1 },
     ]);
     return (
-        <div style={{ width: '100%', height: '100%' }}>
+        <AgGridProvider modules={[AllCommunityModule]}>
             <div style={{ width: '100%', height: '100%' }}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} />
+                <div style={{ width: '100%', height: '100%' }}>
+                    <AgGridReact rowData={rowData} columnDefs={columnDefs} />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx
index 74bf914e44e..136f363bd34 100644
--- a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx
@@ -2,10 +2,8 @@ import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, RowSelectionOptions } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 const rowSelection: RowSelectionOptions = {
     mode: 'multiRow',
@@ -96,17 +94,19 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={{ height: 500 }}>
-            <AgGridReact
-                rowData={rowData}
-                columnDefs={columnDefs}
-                defaultColDef={defaultColDef}
-                rowSelection={rowSelection}
-                pagination={true}
-                paginationPageSize={10}
-                paginationPageSizeSelector={[10, 25, 50]}
-            />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ height: 500 }}>
+                <AgGridReact
+                    rowData={rowData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    rowSelection={rowSelection}
+                    pagination={true}
+                    paginationPageSize={10}
+                    paginationPageSizeSelector={[10, 25, 50]}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx
index 16aa21ec842..b1b6f0d8947 100644
--- a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx
@@ -2,17 +2,17 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridReadyEvent, SuppressKeyboardEventParams } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, TextFilterModule, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomElements from './customElements';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GRID_CELL_CLASSNAME = 'ag-cell';
 
@@ -136,16 +136,18 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    onGridReady={onGridReady}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx
index 5e15f834299..02587575558 100644
--- a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx
@@ -12,25 +12,24 @@ import type {
 } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
-    ModuleRegistry,
     NumberEditorModule,
     NumberFilterModule,
     TextEditorModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     TextFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const [lastFocused, setLastFocused] = useState<
@@ -96,31 +95,33 @@ const GridExample = () => {
     );
 
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <div className="test-container">
-                <div>
+        <AgGridProvider modules={modules}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <div className="test-container">
+                    <div>
+                        <div className="form-container">
+                            <label>Input Above</label>
+                            <input type="text" />
+                        </div>
+                    </div>
+                    <div id="myGrid" style={{ height: '100%', width: '100%' }}>
+                        <AgGridReact
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            onCellFocused={onCellFocused}
+                            onHeaderFocused={onHeaderFocused}
+                            focusGridInnerElement={focusGridInnerElement}
+                        />
+                    </div>
                     <div className="form-container">
-                        <label>Input Above</label>
+                        <label>Input Below</label>
                         <input type="text" />
                     </div>
                 </div>
-                <div id="myGrid" style={{ height: '100%', width: '100%' }}>
-                    <AgGridReact
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        onCellFocused={onCellFocused}
-                        onHeaderFocused={onHeaderFocused}
-                        focusGridInnerElement={focusGridInnerElement}
-                    />
-                </div>
-                <div className="form-container">
-                    <label>Input Below</label>
-                    <input type="text" />
-                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx
index a0873e248e8..f0e2f5ee716 100644
--- a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx
@@ -4,25 +4,24 @@ import { createRoot } from 'react-dom/client';
 import type { ColDef, GridReadyEvent } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
-    ModuleRegistry,
     NumberEditorModule,
     NumberFilterModule,
     TextEditorModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberEditorModule,
     TextEditorModule,
     TextFilterModule,
     NumberFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const columnDefs = useMemo<ColDef[]>(
@@ -62,28 +61,30 @@ const GridExample = () => {
     );
 
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <div className="test-container">
-                <div>
+        <AgGridProvider modules={modules}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <div className="test-container">
+                    <div>
+                        <div className="form-container">
+                            <label>Input Above</label>
+                            <input type="text" />
+                        </div>
+                    </div>
+                    <div id="myGrid" style={{ height: '100%', width: '100%' }}>
+                        <AgGridReact
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                        />
+                    </div>
                     <div className="form-container">
-                        <label>Input Above</label>
+                        <label>Input Below</label>
                         <input type="text" />
                     </div>
                 </div>
-                <div id="myGrid" style={{ height: '100%', width: '100%' }}>
-                    <AgGridReact
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                    />
-                </div>
-                <div className="form-container">
-                    <label>Input Below</label>
-                    <input type="text" />
-                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx
index dc40ab756a2..27f5eb73c58 100644
--- a/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx
@@ -6,17 +6,16 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     HighlightChangesModule,
-    ModuleRegistry,
     ValidationModule,
 } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import DetailCellRenderer from './detailCellRenderer';
 import type { IAccount } from './interfaces';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     HighlightChangesModule,
     ClientSideRowModelModule,
@@ -25,7 +24,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 let allRowData: any[];
 
@@ -89,21 +88,23 @@ const GridExample = () => {
     );
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IAccount>
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    masterDetail={true}
-                    detailCellRenderer={detailCellRenderer}
-                    detailRowHeight={70}
-                    groupDefaultExpanded={1}
-                    onGridReady={onGridReady}
-                    onFirstDataRendered={onFirstDataRendered}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IAccount>
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        masterDetail={true}
+                        detailCellRenderer={detailCellRenderer}
+                        detailRowHeight={70}
+                        groupDefaultExpanded={1}
+                        onGridReady={onGridReady}
+                        onFirstDataRendered={onFirstDataRendered}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx
index 2f39c0c78b1..132818428a9 100644
--- a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx
@@ -6,18 +6,17 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     HighlightChangesModule,
-    ModuleRegistry,
     RowApiModule,
     RowSelectionModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise';
 import type { CustomDetailCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IAccount } from './interfaces';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     RowSelectionModule,
     RowApiModule,
@@ -28,7 +27,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 let allRowData: any[];
 
@@ -122,21 +121,23 @@ const GridExample = () => {
     );
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IAccount>
-                    ref={gridRef}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    getRowId={getRowId}
-                    masterDetail={true}
-                    detailCellRendererParams={detailCellRendererParams}
-                    onGridReady={onGridReady}
-                    onFirstDataRendered={onFirstDataRendered}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IAccount>
+                        ref={gridRef}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        getRowId={getRowId}
+                        masterDetail={true}
+                        detailCellRendererParams={detailCellRendererParams}
+                        onGridReady={onGridReady}
+                        onFirstDataRendered={onFirstDataRendered}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx
index 248bda5595c..ebcdd045ea8 100644
--- a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx
@@ -6,18 +6,17 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     HighlightChangesModule,
-    ModuleRegistry,
     RowApiModule,
     RowSelectionModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise';
 import type { CustomDetailCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { IAccount } from './interfaces';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     RowSelectionModule,
     RowApiModule,
@@ -28,7 +27,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 let allRowData: any[];
 
@@ -124,21 +123,23 @@ const GridExample = () => {
     );
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact<IAccount>
-                    ref={gridRef}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    getRowId={getRowId}
-                    masterDetail={true}
-                    detailCellRendererParams={detailCellRendererParams}
-                    onGridReady={onGridReady}
-                    onFirstDataRendered={onFirstDataRendered}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact<IAccount>
+                        ref={gridRef}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        getRowId={getRowId}
+                        masterDetail={true}
+                        detailCellRendererParams={detailCellRendererParams}
+                        onGridReady={onGridReady}
+                        onFirstDataRendered={onFirstDataRendered}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx
index 06acf781473..71f4f6a909c 100644
--- a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx
@@ -12,15 +12,14 @@ import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     HighlightChangesModule,
-    ModuleRegistry,
     RowApiModule,
     RowSelectionModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     RowSelectionModule,
     RowApiModule,
@@ -31,7 +30,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     ColumnsToolPanelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 let allRowData: any[];
 
@@ -126,21 +125,23 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    ref={gridRef}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    getRowId={getRowId}
-                    masterDetail={true}
-                    detailCellRendererParams={detailCellRendererParams}
-                    onGridReady={onGridReady}
-                    onFirstDataRendered={onFirstDataRendered}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        ref={gridRef}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        getRowId={getRowId}
+                        masterDetail={true}
+                        detailCellRendererParams={detailCellRendererParams}
+                        onGridReady={onGridReady}
+                        onFirstDataRendered={onFirstDataRendered}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx
index d9ee41f01ba..24ace9a2fee 100644
--- a/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx
@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client';
 import {
     ClientSideRowModelModule,
     CsvExportModule,
-    ModuleRegistry,
     NumberFilterModule,
     TextFilterModule,
     ValidationModule,
@@ -17,7 +16,7 @@ import {
     ExcelExportModule,
     SetFilterModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
@@ -30,9 +29,6 @@ const sharedModules = [
 const leftModules = [SetFilterModule, ClipboardModule, CsvExportModule];
 const rightModules = [TextFilterModule, NumberFilterModule, CsvExportModule, ExcelExportModule];
 
-// Register shared Modules globally
-ModuleRegistry.registerModules(sharedModules);
-
 const columns: ColDef[] = [{ field: 'id' }, { field: 'color' }, { field: 'value1' }];
 
 const defaultColDef: ColDef = {
@@ -72,29 +68,31 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div className="inner-col">
-                <AgGridReact
-                    gridId="Left"
-                    defaultColDef={defaultColDef}
-                    rowData={leftRowData}
-                    modules={leftModules}
-                    columnDefs={columns}
-                    onGridReady={onGridReady}
-                />
-            </div>
+        <AgGridProvider modules={sharedModules}>
+            <div className="example-wrapper">
+                <div className="inner-col">
+                    <AgGridReact
+                        gridId="Left"
+                        defaultColDef={defaultColDef}
+                        rowData={leftRowData}
+                        modules={leftModules}
+                        columnDefs={columns}
+                        onGridReady={onGridReady}
+                    />
+                </div>
 
-            <div className="inner-col">
-                <AgGridReact
-                    gridId="Right"
-                    defaultColDef={defaultColDef}
-                    rowData={rightRowData}
-                    modules={rightModules}
-                    columnDefs={columns}
-                    onGridReady={onGridReady}
-                />
+                <div className="inner-col">
+                    <AgGridReact
+                        gridId="Right"
+                        defaultColDef={defaultColDef}
+                        rowData={rightRowData}
+                        modules={rightModules}
+                        columnDefs={columns}
+                        onGridReady={onGridReady}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx
index 32f0a51ea7b..eefa571554b 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx
@@ -1,18 +1,15 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import type { CustomParams } from './customOverlay';
 import { CustomOverlay } from './customOverlay';
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 interface IAthlete {
     athlete: string;
@@ -36,24 +33,26 @@ const GridExample = () => {
     const [activeOverlayParams, setActiveOverlayParams] = useState<CustomParams>({ count: 1 });
 
     return (
-        <div className="example-wrapper">
-            <div className="button-row">
-                <button onClick={() => setActiveOverlay(() => CustomOverlay)}>Show custom overlay</button>
-                <button onClick={() => setActiveOverlay(undefined)}>Hide custom overlay</button>
-                <button onClick={() => setActiveOverlayParams((prev) => ({ count: prev.count + 1 }))}>
-                    Increment Param
-                </button>
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div className="button-row">
+                    <button onClick={() => setActiveOverlay(() => CustomOverlay)}>Show custom overlay</button>
+                    <button onClick={() => setActiveOverlay(undefined)}>Hide custom overlay</button>
+                    <button onClick={() => setActiveOverlayParams((prev) => ({ count: prev.count + 1 }))}>
+                        Increment Param
+                    </button>
+                </div>
 
-            <div className="grid-wrapper">
-                <AgGridReact<IAthlete>
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    activeOverlay={activeOverlay}
-                    activeOverlayParams={activeOverlayParams}
-                />
+                <div className="grid-wrapper">
+                    <AgGridReact<IAthlete>
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        activeOverlay={activeOverlay}
+                        activeOverlayParams={activeOverlayParams}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx
index 6c39bf9f77e..558da03a45e 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx
@@ -1,17 +1,14 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import StatusOverlay from './statusOverlay';
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 interface IAthlete {
     athlete: string;
@@ -50,26 +47,28 @@ const GridExample = () => {
     };
 
     return (
-        <div className="example-wrapper">
-            <div className="button-row">
-                <label className="toggle loading-toggle">
-                    <input type="checkbox" checked={loading === true} onChange={onLoadingToggle} /> Loading
-                </label>
-                <button onClick={setNoRowsOverlay}>activeOverlay = agNoRowsOverlay</button>
-                <button onClick={setCustomOverlay}>activeOverlay = CustomOverlay</button>
-                <button onClick={clearOverlay}>Hide activeOverlay</button>
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div className="button-row">
+                    <label className="toggle loading-toggle">
+                        <input type="checkbox" checked={loading === true} onChange={onLoadingToggle} /> Loading
+                    </label>
+                    <button onClick={setNoRowsOverlay}>activeOverlay = agNoRowsOverlay</button>
+                    <button onClick={setCustomOverlay}>activeOverlay = CustomOverlay</button>
+                    <button onClick={clearOverlay}>Hide activeOverlay</button>
+                </div>
 
-            <div className="grid-wrapper">
-                <AgGridReact
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    components={components}
-                    loading={loading}
-                    activeOverlay={activeOverlay}
-                />
+                <div className="grid-wrapper">
+                    <AgGridReact
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        components={components}
+                        loading={loading}
+                        activeOverlay={activeOverlay}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx
index db7ff27ca96..2357a41c4ca 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx
@@ -2,8 +2,8 @@ import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomNoRowsOverlay from './customNoRowsOverlay';
 import './styles.css';
@@ -19,10 +19,7 @@ const defaultColDef = {
     flex: 1,
 };
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 const GridExample = () => {
     const [rowData, setRowData] = useState<IAthlete[]>([]);
@@ -34,22 +31,26 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <button onClick={() => setRowData([])}>Clear rowData</button>
+                    <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>
+                        Set rowData
+                    </button>
+                </div>
+
+                <div style={{ height: '100%' }}>
+                    <AgGridReact<IAthlete>
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        noRowsOverlayComponent={CustomNoRowsOverlay}
+                        noRowsOverlayComponentParams={noRowsOverlayComponentParams}
+                    />
+                </div>
             </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact<IAthlete>
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    noRowsOverlayComponent={CustomNoRowsOverlay}
-                    noRowsOverlayComponentParams={noRowsOverlayComponentParams}
-                />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx
index 728c6b8bf7a..cb9dbe32617 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx
@@ -1,17 +1,14 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomOverlay from './customOverlay';
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 interface IAthlete {
     athlete: string;
@@ -37,25 +34,27 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
-                    loading
-                </label>
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
+                        loading
+                    </label>
+                </div>
 
-            <div style={{ height: '100%', width: '100%' }}>
-                <AgGridReact<IAthlete>
-                    loading={loading}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    overlayComponent={CustomOverlay}
-                    overlayComponentParams={overlayComponentParams}
-                />
+                <div style={{ height: '100%', width: '100%' }}>
+                    <AgGridReact<IAthlete>
+                        loading={loading}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        overlayComponent={CustomOverlay}
+                        overlayComponentParams={overlayComponentParams}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx
index ee7f3488120..b72f2c06b1c 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx
@@ -1,17 +1,14 @@
 import React, { StrictMode, useCallback, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef, IOverlayParams } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomLoadingOverlay from './customLoadingOverlay';
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 interface IAthlete {
     athlete: string;
@@ -43,24 +40,26 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
-                    loading
-                </label>
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
+                        loading
+                    </label>
+                </div>
 
-            <div style={{ height: '100%', width: '100%' }}>
-                <AgGridReact<IAthlete>
-                    loading={loading}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    overlayComponentSelector={overlayComponentSelector}
-                />
+                <div style={{ height: '100%', width: '100%' }}>
+                    <AgGridReact<IAthlete>
+                        loading={loading}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        overlayComponentSelector={overlayComponentSelector}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx
index 51f012f9042..99ec22baf08 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx
@@ -1,16 +1,13 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 interface IAthlete {
     athlete: string;
@@ -27,21 +24,25 @@ const GridExample = () => {
     const [rowData, setRowData] = useState<IAthlete[] | undefined>();
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
-                    loading
-                </label>
-
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
+                        loading
+                    </label>
+
+                    <button onClick={() => setRowData([])}>Clear rowData</button>
+                    <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>
+                        Set rowData
+                    </button>
+                </div>
+
+                <div style={{ height: '100%' }}>
+                    <AgGridReact loading={loading} rowData={rowData} columnDefs={columnDefs} />
+                </div>
             </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact loading={loading} rowData={rowData} columnDefs={columnDefs} />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx
deleted file mode 100644
index 853861f789c..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-import './styles.css';
-
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
-
-const columnDefs = [{ field: 'athlete' }, { field: 'country' }];
-
-const GridExample = () => {
-    const [rowData, setRowData] = useState([]);
-
-    return (
-        <div className="example-wrapper">
-            <div>
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
-            </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} />
-            </div>
-        </div>
-    );
-};
-
-const root = createRoot(document.getElementById('root'));
-root.render(<GridExample />);
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css
deleted file mode 100644
index b35fa5f3ab2..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.example-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-#myGrid {
-    flex: 1 1 0px;
-}
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx
deleted file mode 100644
index aa677999c41..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-import './styles.css';
-
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
-
-interface IAthlete {
-    athlete: string;
-    country: string;
-}
-
-const columnDefs: ColDef[] = [{ field: 'athlete' }, { field: 'country' }];
-
-const GridExample = () => {
-    const [rowData, setRowData] = useState<IAthlete[]>([]);
-
-    return (
-        <div className="example-wrapper">
-            <div>
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
-            </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} />
-            </div>
-        </div>
-    );
-};
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<GridExample />);
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css
deleted file mode 100644
index b35fa5f3ab2..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.example-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-#myGrid {
-    flex: 1 1 0px;
-}
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx
index 4c476ea2d80..89dbeb27e3b 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx
@@ -1,24 +1,18 @@
 import React, { StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    CsvExportModule,
-    ModuleRegistry,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, CsvExportModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef, OverlayComponentUserParams } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     CsvExportModule,
     TextFilterModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 interface IAthlete {
     athlete: string;
@@ -48,40 +42,46 @@ const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} defaultChecked={loading} />
-                    loading
-                </label>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input
+                            type="checkbox"
+                            onChange={(e) => setLoading(e.target.checked)}
+                            defaultChecked={loading}
+                        />
+                        loading
+                    </label>
 
-                <button onClick={() => setRowData(rawRowData)}>Set Row Data</button>
-                <button onClick={() => setRowData([])}>Clear Row Data</button>
-                <button
-                    onClick={() => {
-                        setRowData(rawRowData);
-                        gridRef.current?.api.setFilterModel({
-                            country: { filterType: 'text', type: 'equals', filter: 'Spain' },
-                        });
-                    }}
-                >
-                    Set Non Matching Filter
-                </button>
-                <button onClick={() => gridRef.current?.api.setFilterModel(null)}>Clear Filter</button>
-                <button onClick={() => gridRef.current?.api.exportDataAsCsv()}>Export CSV</button>
-            </div>
+                    <button onClick={() => setRowData(rawRowData)}>Set Row Data</button>
+                    <button onClick={() => setRowData([])}>Clear Row Data</button>
+                    <button
+                        onClick={() => {
+                            setRowData(rawRowData);
+                            gridRef.current?.api.setFilterModel({
+                                country: { filterType: 'text', type: 'equals', filter: 'Spain' },
+                            });
+                        }}
+                    >
+                        Set Non Matching Filter
+                    </button>
+                    <button onClick={() => gridRef.current?.api.setFilterModel(null)}>Clear Filter</button>
+                    <button onClick={() => gridRef.current?.api.exportDataAsCsv()}>Export CSV</button>
+                </div>
 
-            <div style={{ height: '100%' }}>
-                <AgGridReact
-                    ref={gridRef}
-                    loading={loading}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    overlayComponentParams={overlayComponentParams}
-                />
+                <div style={{ height: '100%' }}>
+                    <AgGridReact
+                        ref={gridRef}
+                        loading={loading}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        overlayComponentParams={overlayComponentParams}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx
index 7b2b8078f38..554e247c780 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx
@@ -1,24 +1,18 @@
 import React, { StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    CsvExportModule,
-    ModuleRegistry,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, CsvExportModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     TextFilterModule,
     CsvExportModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 interface IAthlete {
     athlete: string;
@@ -42,39 +36,45 @@ const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} defaultChecked={loading} />
-                    loading
-                </label>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input
+                            type="checkbox"
+                            onChange={(e) => setLoading(e.target.checked)}
+                            defaultChecked={loading}
+                        />
+                        loading
+                    </label>
 
-                <button onClick={() => setRowData(rawRowData)}>Set Row Data</button>
-                <button onClick={() => setRowData([])}>Clear Row Data</button>
-                <button
-                    onClick={() => {
-                        setRowData(rawRowData);
-                        gridRef.current?.api.setFilterModel({
-                            country: { filterType: 'text', type: 'equals', filter: 'Spain' },
-                        });
-                    }}
-                >
-                    Set Non Matching Filter
-                </button>
-                <button onClick={() => gridRef.current?.api.setFilterModel(null)}>Clear Filter</button>
-                <button onClick={() => gridRef.current?.api.exportDataAsCsv()}>Export CSV</button>
-            </div>
+                    <button onClick={() => setRowData(rawRowData)}>Set Row Data</button>
+                    <button onClick={() => setRowData([])}>Clear Row Data</button>
+                    <button
+                        onClick={() => {
+                            setRowData(rawRowData);
+                            gridRef.current?.api.setFilterModel({
+                                country: { filterType: 'text', type: 'equals', filter: 'Spain' },
+                            });
+                        }}
+                    >
+                        Set Non Matching Filter
+                    </button>
+                    <button onClick={() => gridRef.current?.api.setFilterModel(null)}>Clear Filter</button>
+                    <button onClick={() => gridRef.current?.api.exportDataAsCsv()}>Export CSV</button>
+                </div>
 
-            <div style={{ height: '100%' }}>
-                <AgGridReact
-                    ref={gridRef}
-                    loading={loading}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                />
+                <div style={{ height: '100%' }}>
+                    <AgGridReact
+                        ref={gridRef}
+                        loading={loading}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx
index b4cc062fb70..13e1b860ca3 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx
@@ -1,25 +1,19 @@
 import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    TextEditorModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, TextEditorModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomLoadingOverlay from './customLoadingOverlay';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextEditorModule,
     TextFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 interface IAthlete {
     athlete: string;
@@ -53,25 +47,27 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
-                    loading
-                </label>
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
+                        loading
+                    </label>
+                </div>
 
-            <div style={{ height: '100%', width: '100%' }}>
-                <AgGridReact<IAthlete>
-                    loading={loading}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    loadingOverlayComponent={CustomLoadingOverlay}
-                    loadingOverlayComponentParams={loadingOverlayComponentParams}
-                />
+                <div style={{ height: '100%', width: '100%' }}>
+                    <AgGridReact<IAthlete>
+                        loading={loading}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        loadingOverlayComponent={CustomLoadingOverlay}
+                        loadingOverlayComponentParams={loadingOverlayComponentParams}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx
index 89e1bf0416a..010de3dca77 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx
@@ -2,14 +2,8 @@ import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    TextEditorModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, TextEditorModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomNoRowsOverlay from './customNoRowsOverlay';
 import './styles.css';
@@ -31,12 +25,12 @@ const defaultColDef = {
     filter: true,
 };
 
-ModuleRegistry.registerModules([
+const modules = [
     TextEditorModule,
     TextFilterModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const [rowData, setRowData] = useState<IAthlete[]>([]);
@@ -48,22 +42,26 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
-            </div>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <button onClick={() => setRowData([])}>Clear rowData</button>
+                    <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>
+                        Set rowData
+                    </button>
+                </div>
 
-            <div style={{ height: '100%' }}>
-                <AgGridReact<IAthlete>
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    noRowsOverlayComponent={CustomNoRowsOverlay}
-                    noRowsOverlayComponentParams={noRowsOverlayComponentParams}
-                />
+                <div style={{ height: '100%' }}>
+                    <AgGridReact<IAthlete>
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        noRowsOverlayComponent={CustomNoRowsOverlay}
+                        noRowsOverlayComponentParams={noRowsOverlayComponentParams}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx
index 51f012f9042..99ec22baf08 100644
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx
@@ -1,16 +1,13 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 interface IAthlete {
     athlete: string;
@@ -27,21 +24,25 @@ const GridExample = () => {
     const [rowData, setRowData] = useState<IAthlete[] | undefined>();
 
     return (
-        <div className="example-wrapper">
-            <div>
-                <label className="checkbox">
-                    <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
-                    loading
-                </label>
-
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div>
+                    <label className="checkbox">
+                        <input type="checkbox" onChange={(e) => setLoading(e.target.checked)} checked={loading} />
+                        loading
+                    </label>
+
+                    <button onClick={() => setRowData([])}>Clear rowData</button>
+                    <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>
+                        Set rowData
+                    </button>
+                </div>
+
+                <div style={{ height: '100%' }}>
+                    <AgGridReact loading={loading} rowData={rowData} columnDefs={columnDefs} />
+                </div>
             </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact loading={loading} rowData={rowData} columnDefs={columnDefs} />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx
deleted file mode 100644
index 853861f789c..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-import './styles.css';
-
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
-
-const columnDefs = [{ field: 'athlete' }, { field: 'country' }];
-
-const GridExample = () => {
-    const [rowData, setRowData] = useState([]);
-
-    return (
-        <div className="example-wrapper">
-            <div>
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
-            </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} />
-            </div>
-        </div>
-    );
-};
-
-const root = createRoot(document.getElementById('root'));
-root.render(<GridExample />);
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css
deleted file mode 100644
index b35fa5f3ab2..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.example-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-#myGrid {
-    flex: 1 1 0px;
-}
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx
deleted file mode 100644
index aa677999c41..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import type { ColDef } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-import './styles.css';
-
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
-
-interface IAthlete {
-    athlete: string;
-    country: string;
-}
-
-const columnDefs: ColDef[] = [{ field: 'athlete' }, { field: 'country' }];
-
-const GridExample = () => {
-    const [rowData, setRowData] = useState<IAthlete[]>([]);
-
-    return (
-        <div className="example-wrapper">
-            <div>
-                <button onClick={() => setRowData([])}>Clear rowData</button>
-                <button onClick={() => setRowData([{ athlete: 'Michael Phelps', country: 'US' }])}>Set rowData</button>
-            </div>
-
-            <div style={{ height: '100%' }}>
-                <AgGridReact rowData={rowData} columnDefs={columnDefs} />
-            </div>
-        </div>
-    );
-};
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<GridExample />);
diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css
deleted file mode 100644
index b35fa5f3ab2..00000000000
--- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.example-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-#myGrid {
-    flex: 1 1 0px;
-}
diff --git a/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx
index d2877556797..9b63f2164cc 100644
--- a/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx
@@ -2,10 +2,8 @@ import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AllCommunityModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Row Data Interface
 interface IRow {
@@ -41,9 +39,11 @@ const GridExample = () => {
 
     // Container: Defines the grid's theme & dimensions.
     return (
-        <div style={{ width: '100%', height: '100%' }}>
-            <AgGridReact rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} />
-        </div>
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ width: '100%', height: '100%' }}>
+                <AgGridReact rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} />
+            </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx
index 70e81ecb0e8..f81253af52f 100644
--- a/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx
@@ -2,7 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import {
     ColumnMenuModule,
     ColumnsToolPanelModule,
@@ -10,11 +10,11 @@ import {
     FiltersToolPanelModule,
     PivotModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     ColumnsToolPanelModule,
 
@@ -23,7 +23,7 @@ ModuleRegistry.registerModules([
     ContextMenuModule,
     PivotModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 interface IOlympicData {
     athlete: string;
@@ -68,34 +68,36 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <label>
-                        <span>removePivotHeaderRowWhenSingleValueColumn:</span>
-                        <input
-                            type="checkbox"
-                            id="removePivotHeaderRowWhenSingleValueColumn"
-                            onChange={togglePivotHeader}
-                            defaultChecked
-                        />
-                    </label>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <label>
+                            <span>removePivotHeaderRowWhenSingleValueColumn:</span>
+                            <input
+                                type="checkbox"
+                                id="removePivotHeaderRowWhenSingleValueColumn"
+                                onChange={togglePivotHeader}
+                                defaultChecked
+                            />
+                        </label>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact<IOlympicData>
-                        ref={gridRef}
-                        rowData={data}
-                        loading={loading}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        autoGroupColumnDef={autoGroupColumnDef}
-                        pivotMode={true}
-                        removePivotHeaderRowWhenSingleValueColumn={true}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact<IOlympicData>
+                            ref={gridRef}
+                            rowData={data}
+                            loading={loading}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            autoGroupColumnDef={autoGroupColumnDef}
+                            pivotMode={true}
+                            removePivotHeaderRowWhenSingleValueColumn={true}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx
index ecc15067168..eb9786d7b09 100644
--- a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx
@@ -3,10 +3,9 @@
 import React, { StrictMode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ModuleRegistry } from 'ag-grid-community';
 import type { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 // Type definitions
 interface RowData {
@@ -29,7 +28,6 @@ interface GridComponentProps {
     index: number;
 }
 
-ModuleRegistry.registerModules([AllEnterpriseModule]);
 const queryParamsFromUrl = new URLSearchParams(window.location.search);
 console.log('React Version', React.version, queryParamsFromUrl.get('version'), 'Prod:', queryParamsFromUrl.get('prod'));
 
@@ -107,23 +105,25 @@ const GridComponent = React.memo<GridComponentProps>(({ id, title, data, index }
         };
     }, []);
     return (
-        <div style={{ border: '1px solid #ccc', margin: '10px 0', padding: '10px' }}>
-            <h3>
-                {title} (Position: {index + 1})
-            </h3>
-            <div style={{ height: '150px', width: '100%' }}>
-                <AgGridReact
-                    ref={gridRef}
-                    rowData={data}
-                    rowSelection={rowSelection}
-                    columnDefs={colDefs}
-                    defaultColDef={defaultColDef}
-                    getRowId={getRowId}
-                    onGridReady={onGridReady}
-                    onGridPreDestroyed={onGridPreDestroyed}
-                />
+        <AgGridProvider modules={[AllEnterpriseModule]}>
+            <div style={{ border: '1px solid #ccc', margin: '10px 0', padding: '10px' }}>
+                <h3>
+                    {title} (Position: {index + 1})
+                </h3>
+                <div style={{ height: '150px', width: '100%' }}>
+                    <AgGridReact
+                        ref={gridRef}
+                        rowData={data}
+                        rowSelection={rowSelection}
+                        columnDefs={colDefs}
+                        defaultColDef={defaultColDef}
+                        getRowId={getRowId}
+                        onGridReady={onGridReady}
+                        onGridPreDestroyed={onGridPreDestroyed}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 });
 
diff --git a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx
index e2727188cd2..b7c83fee771 100644
--- a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx
@@ -3,40 +3,39 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 export function GridExample() {
     const [show, setShow] = useState(true);
     const [visibility, setVisibility] = useState<any>('visible');
 
     return (
-        <div style={{ height: '100%' }}>
-            <button
-                onClick={() => {
-                    setVisibility('hidden'); // Making the grid not-visible will force the 'setScrollPosition' function to invoke the 'attemptSettingScrollPosition' function, which in turn triggers the _waitUntil
-                    const scroller = document.querySelector('.ag-body-viewport')!;
-                    scroller.scrollTop += 50; // Performing a scroll will trigger a code path that uses the problematic _waitUntil function
-                    setTimeout(() => {
-                        setShow(false); // Simulating _disposal_ of the Ag-Grid
+        <AgGridProvider modules={modules}>
+            <div style={{ height: '100%' }}>
+                <button
+                    onClick={() => {
+                        setVisibility('hidden'); // Making the grid not-visible will force the 'setScrollPosition' function to invoke the 'attemptSettingScrollPosition' function, which in turn triggers the _waitUntil
+                        const scroller = document.querySelector('.ag-body-viewport')!;
+                        scroller.scrollTop += 50; // Performing a scroll will trigger a code path that uses the problematic _waitUntil function
                         setTimeout(() => {
-                            // Simulating the removal of DOM api (which happens in vitest between tests)
-                            (window as any).clearInterval = undefined;
-                            (window as any).setTimeout = undefined;
-                            (window as any).setInterval = undefined;
-                            (window as any).clearTimeout = undefined;
+                            setShow(false); // Simulating _disposal_ of the Ag-Grid
+                            setTimeout(() => {
+                                // Simulating the removal of DOM api (which happens in vitest between tests)
+                                (window as any).clearInterval = undefined;
+                                (window as any).setTimeout = undefined;
+                                (window as any).setInterval = undefined;
+                                (window as any).clearTimeout = undefined;
+                            }, 50);
                         }, 50);
-                    }, 50);
-                }}
-            >
-                Destroy
-            </button>
-            <div style={{ height: '60%', visibility }}>{show && <GridWrapper />}</div>
-        </div>
+                    }}
+                >
+                    Destroy
+                </button>
+                <div style={{ height: '60%', visibility }}>{show && <GridWrapper />}</div>
+            </div>
+        </AgGridProvider>
     );
 }
 
diff --git a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx
index 08e7debf030..7f987d0c484 100644
--- a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx
@@ -3,19 +3,11 @@
 import React, { StrictMode, useCallback, useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    type ColDef,
-    type GridReadyEvent,
-    ModuleRegistry,
-    ValidationModule,
-} from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([
-    ClientSideRowModelModule,
-    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+import type { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
+
+const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])];
 
 let startTime: any = undefined;
 let endTime: any = undefined;
@@ -116,35 +108,37 @@ const GridExample = () => {
     };
 
     return (
-        <div style={containerStyle}>
-            <div style={{ marginBottom: '10px' }}>
-                <button onClick={toggleRenderingMode}>
-                    Switch to {renderingMode === 'legacy' ? 'Default' : 'Legacy'} Mode
-                </button>
-                <button onClick={toggleGetRowId} style={{ marginLeft: '10px' }}>
-                    {useGetRowId ? 'Remove' : 'Add'} getRowId
-                </button>
-            </div>
-            <div style={{ marginBottom: '10px', fontSize: '14px', color: '#666' }}>
-                <div>
-                    Current Rendering Mode: <strong>{renderingMode}</strong>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={{ marginBottom: '10px' }}>
+                    <button onClick={toggleRenderingMode}>
+                        Switch to {renderingMode === 'legacy' ? 'Default' : 'Legacy'} Mode
+                    </button>
+                    <button onClick={toggleGetRowId} style={{ marginLeft: '10px' }}>
+                        {useGetRowId ? 'Remove' : 'Add'} getRowId
+                    </button>
                 </div>
-                <div>
-                    Current getRowId: <strong>{useGetRowId ? 'Enabled' : 'Disabled'}</strong>
+                <div style={{ marginBottom: '10px', fontSize: '14px', color: '#666' }}>
+                    <div>
+                        Current Rendering Mode: <strong>{renderingMode}</strong>
+                    </div>
+                    <div>
+                        Current getRowId: <strong>{useGetRowId ? 'Enabled' : 'Disabled'}</strong>
+                    </div>
+                </div>
+                <div style={gridStyle}>
+                    <AgGridReact<IOlympicData>
+                        key={`${renderingMode}-${useGetRowId}`}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        onGridReady={onGridReady}
+                        suppressScrollOnNewData
+                        renderingMode={renderingMode}
+                        getRowId={useGetRowId ? (params: GetRowIdParams) => String(params.data.id) : undefined}
+                    />
                 </div>
             </div>
-            <div style={gridStyle}>
-                <AgGridReact<IOlympicData>
-                    key={`${renderingMode}-${useGetRowId}`}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    onGridReady={onGridReady}
-                    suppressScrollOnNewData
-                    renderingMode={renderingMode}
-                    getRowId={useGetRowId ? (params) => String(params.data.id) : undefined}
-                />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx
index 6adfc44fda8..49245b1be39 100644
--- a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx
@@ -5,18 +5,17 @@ import type { ColDef, GetRowIdParams, GridApi, GridReadyEvent, RowDropZoneParams
 import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
-    ModuleRegistry,
     RowApiModule,
     RowDragModule,
     RowStyleModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     RowApiModule,
     TextFilterModule,
@@ -24,7 +23,7 @@ ModuleRegistry.registerModules([
     RowStyleModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const columns: ColDef[] = [
     { field: 'id', rowDrag: true },
@@ -203,22 +202,24 @@ const GridExample = () => {
                     suppressMoveWhenRowDragging={true}
                     rowData={side === 'Left' ? leftRowData : rightRowData}
                     columnDefs={[...columns]}
-                    onGridReady={(params) => onGridReady(side, params)}
+                    onGridReady={(params: GridReadyEvent) => onGridReady(side, params)}
                 />
             </div>
         </div>
     );
 
     return (
-        <div className="example-wrapper">
-            {getInnerGridCol('Left')}
-            <div className="inner-col vertical-toolbar">
-                <span className="bin" ref={eBin}>
-                    <i className="far fa-trash-alt fa-3x" ref={eBinIcon}></i>
-                </span>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                {getInnerGridCol('Left')}
+                <div className="inner-col vertical-toolbar">
+                    <span className="bin" ref={eBin}>
+                        <i className="far fa-trash-alt fa-3x" ref={eBinIcon}></i>
+                    </span>
+                </div>
+                {getInnerGridCol('Right')}
             </div>
-            {getInnerGridCol('Right')}
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx
index 429235f516e..6172337b108 100644
--- a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx
@@ -12,18 +12,17 @@ import type {
 import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
-    ModuleRegistry,
     RowApiModule,
     RowDragModule,
     RowStyleModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     RowApiModule,
     TextFilterModule,
@@ -31,7 +30,7 @@ ModuleRegistry.registerModules([
     RowStyleModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const columns: ColDef[] = [
     { field: 'id', rowDrag: true },
@@ -212,22 +211,24 @@ const GridExample = () => {
                     suppressMoveWhenRowDragging={true}
                     rowData={side === 'Left' ? leftRowData : rightRowData}
                     columnDefs={[...columns]}
-                    onGridReady={(params) => onGridReady(side, params)}
+                    onGridReady={(params: GridReadyEvent) => onGridReady(side, params)}
                 />
             </div>
         </div>
     );
 
     return (
-        <div className="example-wrapper">
-            {getInnerGridCol('Left')}
-            <div className="inner-col vertical-toolbar">
-                <span className="bin" ref={eBin}>
-                    <i className="far fa-trash-alt fa-3x" ref={eBinIcon}></i>
-                </span>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                {getInnerGridCol('Left')}
+                <div className="inner-col vertical-toolbar">
+                    <span className="bin" ref={eBin}>
+                        <i className="far fa-trash-alt fa-3x" ref={eBinIcon}></i>
+                    </span>
+                </div>
+                {getInnerGridCol('Right')}
             </div>
-            {getInnerGridCol('Right')}
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx
index 1567d72deb9..12e8c35b8d2 100644
--- a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx
@@ -12,25 +12,24 @@ import type {
 import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
-    ModuleRegistry,
     RowDragModule,
     RowSelectionModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     TextFilterModule,
     RowDragModule,
     RowSelectionModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const SportRenderer = (props: CustomCellRendererProps) => {
     return (
@@ -225,13 +224,15 @@ const GridExample = () => {
     );
 
     return (
-        <div className="top-container">
-            {getTopToolBar()}
-            <div className="grid-wrapper">
-                {getGridWrapper(0)}
-                {getGridWrapper(1)}
+        <AgGridProvider modules={modules}>
+            <div className="top-container">
+                {getTopToolBar()}
+                <div className="grid-wrapper">
+                    {getGridWrapper(0)}
+                    {getGridWrapper(1)}
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx
index 5b9ce0a074c..24406345a29 100644
--- a/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx
@@ -1,17 +1,17 @@
 import React, { StrictMode, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, RowSelectionModule, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, RowSelectionModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef, RowSelectionOptions } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     RowSelectionModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const grid = useRef<AgGridReact>(null);
@@ -48,24 +48,26 @@ const GridExample = () => {
     }
 
     return (
-        <div className="example-wrapper">
-            <div className="example-header">
-                <label>
-                    <span>Hide disabled checkboxes:</span>
-                    <input id="toggle-hide-checkbox" type="checkbox" defaultChecked onChange={toggleHideCheckbox} />
-                </label>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div className="example-header">
+                    <label>
+                        <span>Hide disabled checkboxes:</span>
+                        <input id="toggle-hide-checkbox" type="checkbox" defaultChecked onChange={toggleHideCheckbox} />
+                    </label>
+                </div>
+                <div id="myGrid" className="grid">
+                    <AgGridReact
+                        ref={grid}
+                        rowData={data}
+                        loading={loading}
+                        defaultColDef={defaultColDef}
+                        columnDefs={columnDefs}
+                        rowSelection={rowSelection}
+                    />
+                </div>
             </div>
-            <div id="myGrid" className="grid">
-                <AgGridReact
-                    ref={grid}
-                    rowData={data}
-                    loading={loading}
-                    defaultColDef={defaultColDef}
-                    columnDefs={columnDefs}
-                    rowSelection={rowSelection}
-                />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx
index a845396e3d4..a4d3370b359 100644
--- a/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx
@@ -1,17 +1,17 @@
-import React, { StrictMode, useMemo, useRef, useState } from 'react';
+import React, { StrictMode, useMemo, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ClientSideRowModelModule, ModuleRegistry, RowSelectionModule, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, RowSelectionModule, ValidationModule } from 'ag-grid-community';
 import type { ColDef, RowSelectionOptions } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     RowSelectionModule,
     ClientSideRowModelModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const grid = useRef<AgGridReact>(null);
@@ -48,24 +48,26 @@ const GridExample = () => {
     }
 
     return (
-        <div className="example-wrapper">
-            <div className="example-header">
-                <label>
-                    <span>Hide disabled checkboxes:</span>
-                    <input id="toggle-hide-checkbox" type="checkbox" defaultChecked onChange={toggleHideCheckbox} />
-                </label>
+        <AgGridProvider modules={modules}>
+            <div className="example-wrapper">
+                <div className="example-header">
+                    <label>
+                        <span>Hide disabled checkboxes:</span>
+                        <input id="toggle-hide-checkbox" type="checkbox" defaultChecked onChange={toggleHideCheckbox} />
+                    </label>
+                </div>
+                <div id="myGrid" className="grid">
+                    <AgGridReact
+                        ref={grid}
+                        rowData={data}
+                        loading={loading}
+                        defaultColDef={defaultColDef}
+                        columnDefs={columnDefs}
+                        rowSelection={rowSelection}
+                    />
+                </div>
             </div>
-            <div id="myGrid" className="grid">
-                <AgGridReact
-                    ref={grid}
-                    rowData={data}
-                    loading={loading}
-                    defaultColDef={defaultColDef}
-                    columnDefs={columnDefs}
-                    rowSelection={rowSelection}
-                />
-            </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx
index dd7283805c2..e8fa6641f9b 100644
--- a/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx
@@ -6,7 +6,6 @@ import { createRoot } from 'react-dom/client';
 import {
     ClientSideRowModelModule,
     ColumnsToolPanelModule,
-    ModuleRegistry,
     NewFiltersToolPanelModule,
     NumberFilterModule,
     PivotModule,
@@ -14,12 +13,12 @@ import {
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './styles.css';
 import { useFetchJson } from './useFetchJson';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     ClientSideRowModelModule,
     ColumnsToolPanelModule,
@@ -28,7 +27,7 @@ ModuleRegistry.registerModules([
     PivotModule,
     TextFilterModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 function addStyles(parentEl) {
     const contentClassnames = [...parentEl.querySelector('.content').classList].filter((e) => e !== 'content');
@@ -120,46 +119,48 @@ const GridExample = () => {
     }, [drawerRef, closePopup, filtersToolPanel]);
 
     return (
-        <div style={containerStyle}>
-            <div id="wrapper" className="example-wrapper">
-                <div className="example-header">
-                    <button onClick={openPopup}>Open Columns Tool Panel</button>
-                    <button onClick={openDrawer}>Open Filters Tool Panel</button>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div id="wrapper" className="example-wrapper">
+                    <div className="example-header">
+                        <button onClick={openPopup}>Open Columns Tool Panel</button>
+                        <button onClick={openDrawer}>Open Filters Tool Panel</button>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        enableFilterHandlers
-                        ref={gridRef}
-                        rowData={data}
-                        loading={loading}
-                        popupParent={popupParent}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        autoGroupColumnDef={autoGroupColumnDef}
-                        sideBar={sideBar}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            enableFilterHandlers
+                            ref={gridRef}
+                            rowData={data}
+                            loading={loading}
+                            popupParent={popupParent}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            autoGroupColumnDef={autoGroupColumnDef}
+                            sideBar={sideBar}
+                        />
+                    </div>
                 </div>
-            </div>
 
-            <div id="popup" ref={popupRef}>
-                <div className="inner">
-                    <div>
-                        <button onClick={closePopup}>Close</button>
+                <div id="popup" ref={popupRef}>
+                    <div className="inner">
+                        <div>
+                            <button onClick={closePopup}>Close</button>
+                        </div>
+                        <div className="content" ref={popupContentRef}></div>
                     </div>
-                    <div className="content" ref={popupContentRef}></div>
                 </div>
-            </div>
 
-            <div id="drawer" ref={drawerRef}>
-                <div className="inner">
-                    <div>
-                        <button onClick={closeDrawer}>Close</button>
+                <div id="drawer" ref={drawerRef}>
+                    <div className="inner">
+                        <div>
+                            <button onClick={closeDrawer}>Close</button>
+                        </div>
+                        <div className="content" ref={drawerContentRef}></div>
                     </div>
-                    <div className="content" ref={drawerContentRef}></div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/component-instance/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/component-instance/provided/reactFunctionalTs/index.tsx
index ff3b52a34cd..d1af5e56b68 100644
--- a/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/component-instance/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/component-instance/provided/reactFunctionalTs/index.tsx
@@ -4,19 +4,18 @@ import { createRoot } from 'react-dom/client';
 import type { ColDef, IStatusPanel, RowSelectionOptions, StatusPanelDef } from 'ag-grid-community';
 import {
     ClientSideRowModelModule,
-    ModuleRegistry,
     RowSelectionModule,
     TextEditorModule,
     TextFilterModule,
     ValidationModule,
 } from 'ag-grid-community';
 import { CellSelectionModule, StatusBarModule } from 'ag-grid-enterprise';
-import { AgGridReact, getInstance } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact, getInstance } from 'ag-grid-react';
 
 import ClickableStatusBarComponent from './clickableStatusBarComponent';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextEditorModule,
     TextFilterModule,
     RowSelectionModule,
@@ -24,7 +23,7 @@ ModuleRegistry.registerModules([
     StatusBarModule,
     CellSelectionModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 export interface IClickableStatusBar extends IStatusPanel {
     setVisible(visible: boolean): void;
@@ -100,22 +99,24 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <button onClick={toggleStatusBarComp} style={{ marginBottom: '10px' }}>
-                Toggle Status Bar Component
-            </button>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <button onClick={toggleStatusBarComp} style={{ marginBottom: '10px' }}>
+                    Toggle Status Bar Component
+                </button>
 
-            <div style={gridStyle}>
-                <AgGridReact
-                    ref={gridRef}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowSelection={rowSelection}
-                    statusBar={statusBar}
-                />
+                <div style={gridStyle}>
+                    <AgGridReact
+                        ref={gridRef}
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowSelection={rowSelection}
+                        statusBar={statusBar}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/custom-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/custom-component/provided/reactFunctionalTs/index.tsx
index 48165f4e650..5b67f8ac226 100644
--- a/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/custom-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/status-bar/_examples/custom-component/provided/reactFunctionalTs/index.tsx
@@ -5,7 +5,6 @@ import type { ColDef, RowSelectionOptions, StatusPanelDef } from 'ag-grid-commun
 import {
     ClientSideRowModelModule,
     EventApiModule,
-    ModuleRegistry,
     RowApiModule,
     RowSelectionModule,
     TextEditorModule,
@@ -13,13 +12,13 @@ import {
     ValidationModule,
 } from 'ag-grid-community';
 import { CellSelectionModule, StatusBarModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import ClickableStatusBarComponent from './clickableStatusBarComponent';
 import CountStatusBarComponent from './countStatusBarComponent';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     EventApiModule,
     TextEditorModule,
     TextFilterModule,
@@ -29,7 +28,7 @@ ModuleRegistry.registerModules([
     StatusBarModule,
     CellSelectionModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const rowSelection: RowSelectionOptions = {
     mode: 'multiRow',
@@ -92,17 +91,19 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColDef}
-                    rowSelection={rowSelection}
-                    statusBar={statusBar}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        rowData={rowData}
+                        columnDefs={columnDefs}
+                        defaultColDef={defaultColDef}
+                        rowSelection={rowSelection}
+                        statusBar={statusBar}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/themes/_examples/built-in-themes/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/themes/_examples/built-in-themes/provided/reactFunctionalTs/index.tsx
index 6027073bd85..b723a6a104d 100644
--- a/documentation/ag-grid-docs/src/content/docs/themes/_examples/built-in-themes/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/themes/_examples/built-in-themes/provided/reactFunctionalTs/index.tsx
@@ -1,11 +1,9 @@
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ModuleRegistry, themeAlpine, themeBalham, themeMaterial, themeQuartz } from 'ag-grid-community';
+import { themeAlpine, themeBalham, themeMaterial, themeQuartz } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllEnterpriseModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 const themes = [
     { id: 'themeQuartz', theme: themeQuartz },
@@ -18,20 +16,22 @@ const GridExample = () => {
     const [theme, setBaseTheme] = useState(themes[0]);
 
     return (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-            <p style={{ flex: 0 }}>
-                Theme: <PartSelector options={themes} value={theme} setValue={setBaseTheme} />
-            </p>
-            <div style={{ flex: 1 }}>
-                <AgGridReact
-                    theme={theme.theme}
-                    columnDefs={columnDefs}
-                    rowData={rowData}
-                    defaultColDef={defaultColDef}
-                    sideBar
-                />
+        <AgGridProvider modules={[AllEnterpriseModule]}>
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <p style={{ flex: 0 }}>
+                    Theme: <PartSelector options={themes} value={theme} setValue={setBaseTheme} />
+                </p>
+                <div style={{ flex: 1 }}>
+                    <AgGridReact
+                        theme={theme.theme}
+                        columnDefs={columnDefs}
+                        rowData={rowData}
+                        defaultColDef={defaultColDef}
+                        sideBar
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/color-scheme/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/color-scheme/provided/reactFunctionalTs/index.tsx
index ed0b94cfe78..75f9ca39257 100644
--- a/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/color-scheme/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/color-scheme/provided/reactFunctionalTs/index.tsx
@@ -3,16 +3,13 @@ import { createRoot } from 'react-dom/client';
 
 import {
     AllCommunityModule,
-    ModuleRegistry,
     colorSchemeDarkBlue,
     colorSchemeDarkWarm,
     colorSchemeLightCold,
     colorSchemeLightWarm,
     themeQuartz,
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 const themeLightWarm = themeQuartz.withPart(colorSchemeLightWarm);
 const themeLightCold = themeQuartz.withPart(colorSchemeLightCold);
@@ -21,60 +18,62 @@ const themeDarkBlue = themeQuartz.withPart(colorSchemeDarkBlue);
 
 const GridExample = () => {
     return (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-            <div style={{ display: 'flex', gap: 16 }}>
-                <p style={{ flex: 1 }}>colorSchemeLightWarm:</p>
-                <p style={{ flex: 1 }}>colorSchemeLightCold:</p>
-            </div>
-            <div style={{ flex: 1, display: 'flex', gap: 16 }}>
-                <div style={{ flex: 1 }}>
-                    {
-                        <AgGridReact
-                            theme={themeLightWarm}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <div style={{ display: 'flex', gap: 16 }}>
+                    <p style={{ flex: 1 }}>colorSchemeLightWarm:</p>
+                    <p style={{ flex: 1 }}>colorSchemeLightCold:</p>
                 </div>
-                <div style={{ flex: 1 }}>
-                    {
-                        <AgGridReact
-                            theme={themeLightCold}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+                <div style={{ flex: 1, display: 'flex', gap: 16 }}>
+                    <div style={{ flex: 1 }}>
+                        {
+                            <AgGridReact
+                                theme={themeLightWarm}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        {
+                            <AgGridReact
+                                theme={themeLightCold}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
                 </div>
-            </div>
-            <div style={{ display: 'flex', gap: 16 }}>
-                <p style={{ flex: 1 }}>colorSchemeDarkWarm:</p>
-                <p style={{ flex: 1 }}>colorSchemeDarkBlue:</p>
-            </div>
-            <div style={{ flex: 1, display: 'flex', gap: 16 }}>
-                <div style={{ flex: 1 }}>
-                    {
-                        <AgGridReact
-                            theme={themeDarkWarm}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+                <div style={{ display: 'flex', gap: 16 }}>
+                    <p style={{ flex: 1 }}>colorSchemeDarkWarm:</p>
+                    <p style={{ flex: 1 }}>colorSchemeDarkBlue:</p>
                 </div>
-                <div style={{ flex: 1 }}>
-                    {
-                        <AgGridReact
-                            theme={themeDarkBlue}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+                <div style={{ flex: 1, display: 'flex', gap: 16 }}>
+                    <div style={{ flex: 1 }}>
+                        {
+                            <AgGridReact
+                                theme={themeDarkWarm}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        {
+                            <AgGridReact
+                                theme={themeDarkBlue}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/theme-mode/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/theme-mode/provided/reactFunctionalTs/index.tsx
index 9396972f29a..2e5b57417f0 100644
--- a/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/theme-mode/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/theming-colors/_examples/theme-mode/provided/reactFunctionalTs/index.tsx
@@ -1,11 +1,9 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ModuleRegistry, themeQuartz } from 'ag-grid-community';
+import { themeQuartz } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllEnterpriseModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 const theme = themeQuartz
     .withParams(
@@ -27,22 +25,24 @@ const theme = themeQuartz
 
 const GridExample = () => {
     return (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-            <p style={{ flex: 0 }}>
-                <label>
-                    Dark mode: <input type="checkbox" onChange={(e) => setDarkMode(e.target.checked)} />
-                </label>
-            </p>
-            <div style={{ flex: 1 }}>
-                <AgGridReact
-                    theme={theme}
-                    columnDefs={columnDefs}
-                    rowData={rowData}
-                    defaultColDef={defaultColDef}
-                    sideBar
-                />
+        <AgGridProvider modules={[AllEnterpriseModule]}>
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <p style={{ flex: 0 }}>
+                    <label>
+                        Dark mode: <input type="checkbox" onChange={(e) => setDarkMode(e.target.checked)} />
+                    </label>
+                </p>
+                <div style={{ flex: 1 }}>
+                    <AgGridReact
+                        theme={theme}
+                        columnDefs={columnDefs}
+                        rowData={rowData}
+                        defaultColDef={defaultColDef}
+                        sideBar
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/theming-distribution/_examples/multiple-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/theming-distribution/_examples/multiple-grids/provided/reactFunctionalTs/index.tsx
index 13372c9f04d..79231e3996d 100644
--- a/documentation/ag-grid-docs/src/content/docs/theming-distribution/_examples/multiple-grids/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/theming-distribution/_examples/multiple-grids/provided/reactFunctionalTs/index.tsx
@@ -1,69 +1,69 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { AllCommunityModule, ModuleRegistry, themeAlpine, themeBalham, themeQuartz } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, themeAlpine, themeBalham, themeQuartz } from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import './style.css';
 
-ModuleRegistry.registerModules([AllCommunityModule]);
-
 const GridExample = () => {
     return (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-            <div style={{ display: 'flex', gap: 16 }}>
-                <p style={{ flex: 1 }}>Quartz theme:</p>
-                <p style={{ flex: 1 }}>Alpine theme:</p>
-            </div>
-            <div style={{ flex: 1, display: 'flex', gap: 16 }}>
-                <div style={{ flex: 1 }}>
-                    {
-                        <AgGridReact
-                            theme={themeQuartz}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+        <AgGridProvider modules={[AllCommunityModule]}>
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <div style={{ display: 'flex', gap: 16 }}>
+                    <p style={{ flex: 1 }}>Quartz theme:</p>
+                    <p style={{ flex: 1 }}>Alpine theme:</p>
                 </div>
-                <div style={{ flex: 1 }}>
-                    {
-                        <AgGridReact
-                            theme={themeAlpine}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+                <div style={{ flex: 1, display: 'flex', gap: 16 }}>
+                    <div style={{ flex: 1 }}>
+                        {
+                            <AgGridReact
+                                theme={themeQuartz}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        {
+                            <AgGridReact
+                                theme={themeAlpine}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
                 </div>
-            </div>
-            <div style={{ display: 'flex', gap: 16 }}>
-                <p style={{ flex: 1 }}>Balham theme (green header):</p>
-                <p style={{ flex: 1 }}>Balham theme (red header):</p>
-            </div>
-            <div style={{ flex: 1, display: 'flex', gap: 16 }}>
-                <div style={{ flex: 1 }} className="green-header">
-                    {
-                        <AgGridReact
-                            theme={themeBalham}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+                <div style={{ display: 'flex', gap: 16 }}>
+                    <p style={{ flex: 1 }}>Balham theme (green header):</p>
+                    <p style={{ flex: 1 }}>Balham theme (red header):</p>
                 </div>
-                <div style={{ flex: 1 }} className="red-header">
-                    {
-                        <AgGridReact
-                            theme={themeBalham}
-                            columnDefs={columnDefs}
-                            rowData={rowData}
-                            defaultColDef={defaultColDef}
-                        />
-                    }
+                <div style={{ flex: 1, display: 'flex', gap: 16 }}>
+                    <div style={{ flex: 1 }} className="green-header">
+                        {
+                            <AgGridReact
+                                theme={themeBalham}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
+                    <div style={{ flex: 1 }} className="red-header">
+                        {
+                            <AgGridReact
+                                theme={themeBalham}
+                                columnDefs={columnDefs}
+                                rowData={rowData}
+                                defaultColDef={defaultColDef}
+                            />
+                        }
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/theming-parts/_examples/configuring-theme-parts/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/theming-parts/_examples/configuring-theme-parts/provided/reactFunctionalTs/index.tsx
index 2ac016040bc..0629053f999 100644
--- a/documentation/ag-grid-docs/src/content/docs/theming-parts/_examples/configuring-theme-parts/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/theming-parts/_examples/configuring-theme-parts/provided/reactFunctionalTs/index.tsx
@@ -2,7 +2,6 @@ import React, { StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import {
-    ModuleRegistry,
     colorSchemeDark,
     colorSchemeDarkBlue,
     colorSchemeDarkWarm,
@@ -20,9 +19,7 @@ import {
     themeQuartz,
 } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
-
-ModuleRegistry.registerModules([AllEnterpriseModule]);
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 const baseThemes = [
     { id: 'themeQuartz', value: themeQuartz },
@@ -67,22 +64,24 @@ const GridExample = () => {
     }, [baseTheme, colorScheme, iconSet]);
 
     return (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-            <p style={{ flex: 0 }}>
-                Theme: <PartSelector options={baseThemes} value={baseTheme} setValue={setBaseTheme} />
-                Icons: <PartSelector options={iconSets} value={iconSet} setValue={setIconSet} />
-                Color scheme: <PartSelector options={colorSchemes} value={colorScheme} setValue={setColorScheme} />
-            </p>
-            <div style={{ flex: 1 }}>
-                <AgGridReact
-                    theme={theme}
-                    columnDefs={columnDefs}
-                    rowData={rowData}
-                    defaultColDef={defaultColDef}
-                    sideBar
-                />
+        <AgGridProvider modules={[AllEnterpriseModule]}>
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <p style={{ flex: 0 }}>
+                    Theme: <PartSelector options={baseThemes} value={baseTheme} setValue={setBaseTheme} />
+                    Icons: <PartSelector options={iconSets} value={iconSet} setValue={setIconSet} />
+                    Color scheme: <PartSelector options={colorSchemes} value={colorScheme} setValue={setColorScheme} />
+                </p>
+                <div style={{ flex: 1 }}>
+                    <AgGridReact
+                        theme={theme}
+                        columnDefs={columnDefs}
+                        rowData={rowData}
+                        defaultColDef={defaultColDef}
+                        sideBar
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/filtering-exclude-children/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/filtering-exclude-children/provided/reactFunctionalTs/index.tsx
index 2f1d0fa994c..18652aeca20 100644
--- a/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/filtering-exclude-children/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/filtering-exclude-children/provided/reactFunctionalTs/index.tsx
@@ -2,19 +2,19 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridReadyEvent } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, TextFilterModule, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import { TreeDataModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     TextFilterModule,
     ClientSideRowModelModule,
     TreeDataModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -70,36 +70,38 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <label>
-                        <span>excludeChildrenWhenTreeDataFiltering:</span>
-                        <input
-                            type="checkbox"
-                            id="excludeChildrenWhenTreeDataFiltering"
-                            onClick={toggleFilter}
-                            defaultChecked
-                        />
-                    </label>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <label>
+                            <span>excludeChildrenWhenTreeDataFiltering:</span>
+                            <input
+                                type="checkbox"
+                                id="excludeChildrenWhenTreeDataFiltering"
+                                onClick={toggleFilter}
+                                defaultChecked
+                            />
+                        </label>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        autoGroupColumnDef={autoGroupColumnDef}
-                        treeData={true}
-                        groupDefaultExpanded={-1}
-                        excludeChildrenWhenTreeDataFiltering={true}
-                        getDataPath={getDataPath}
-                        onGridReady={onGridReady}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            autoGroupColumnDef={autoGroupColumnDef}
+                            treeData={true}
+                            groupDefaultExpanded={-1}
+                            excludeChildrenWhenTreeDataFiltering={true}
+                            getDataPath={getDataPath}
+                            onGridReady={onGridReady}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/group-agg-filtering/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/group-agg-filtering/provided/reactFunctionalTs/index.tsx
index 5e9a6a3a4e9..8c31223c372 100644
--- a/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/group-agg-filtering/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/tree-data-filtering/_examples/group-agg-filtering/provided/reactFunctionalTs/index.tsx
@@ -2,26 +2,20 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react
 import { createRoot } from 'react-dom/client';
 
 import type { ColDef, GridReadyEvent } from 'ag-grid-community';
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    NumberFilterModule,
-    TextFilterModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community';
 import { TreeDataModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import './styles.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     NumberFilterModule,
     TextFilterModule,
     ClientSideRowModelModule,
     TreeDataModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const gridRef = useRef<AgGridReact>(null);
@@ -79,31 +73,38 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div className="example-wrapper">
-                <div className="example-header">
-                    <label>
-                        <span>suppressAggFilteredOnly:</span>
-                        <input type="checkbox" id="suppressAggFilteredOnly" onClick={toggleCheckbox} defaultChecked />
-                    </label>
-                </div>
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div className="example-wrapper">
+                    <div className="example-header">
+                        <label>
+                            <span>suppressAggFilteredOnly:</span>
+                            <input
+                                type="checkbox"
+                                id="suppressAggFilteredOnly"
+                                onClick={toggleCheckbox}
+                                defaultChecked
+                            />
+                        </label>
+                    </div>
 
-                <div style={gridStyle}>
-                    <AgGridReact
-                        ref={gridRef}
-                        rowData={rowData}
-                        columnDefs={columnDefs}
-                        defaultColDef={defaultColDef}
-                        autoGroupColumnDef={autoGroupColumnDef}
-                        treeData={true}
-                        groupDefaultExpanded={1}
-                        suppressAggFilteredOnly={true}
-                        getDataPath={getDataPath}
-                        onGridReady={onGridReady}
-                    />
+                    <div style={gridStyle}>
+                        <AgGridReact
+                            ref={gridRef}
+                            rowData={rowData}
+                            columnDefs={columnDefs}
+                            defaultColDef={defaultColDef}
+                            autoGroupColumnDef={autoGroupColumnDef}
+                            treeData={true}
+                            groupDefaultExpanded={1}
+                            suppressAggFilteredOnly={true}
+                            getDataPath={getDataPath}
+                            onGridReady={onGridReady}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/custom-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/custom-component/provided/reactFunctionalTs/index.tsx
index dfd846c7cec..fddbbff9b77 100644
--- a/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/custom-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/custom-component/provided/reactFunctionalTs/index.tsx
@@ -1,19 +1,19 @@
-import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react';
+import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { CellDoubleClickedEvent, CellKeyDownEvent, ColDef } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { TreeDataModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomGroupCellRenderer from './customGroupCellRenderer';
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     TreeDataModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -71,21 +71,23 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    treeData
-                    getDataPath={getDataPath}
-                    rowData={getData()}
-                    columnDefs={columnDefs}
-                    autoGroupColumnDef={autoGroupColumnDef}
-                    defaultColDef={defaultColDef}
-                    groupDefaultExpanded={1}
-                    onCellDoubleClicked={onCellDoubleClicked}
-                    onCellKeyDown={onCellKeyDown}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        treeData
+                        getDataPath={getDataPath}
+                        rowData={getData()}
+                        columnDefs={columnDefs}
+                        autoGroupColumnDef={autoGroupColumnDef}
+                        defaultColDef={defaultColDef}
+                        groupDefaultExpanded={1}
+                        onCellDoubleClicked={onCellDoubleClicked}
+                        onCellKeyDown={onCellKeyDown}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/dynamic-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/dynamic-component/provided/reactFunctionalTs/index.tsx
index 461ca988256..15a0c2ff901 100644
--- a/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/dynamic-component/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/tree-data-group-column/_examples/dynamic-component/provided/reactFunctionalTs/index.tsx
@@ -1,19 +1,19 @@
-import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react';
+import React, { StrictMode, useCallback, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import type { CellDoubleClickedEvent, CellKeyDownEvent, ColDef } from 'ag-grid-community';
-import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community';
+import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community';
 import { TreeDataModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import CustomGroupCellRenderer from './customGroupCellRenderer';
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     TreeDataModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const GridExample = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
@@ -83,21 +83,23 @@ const GridExample = () => {
     }, []);
 
     return (
-        <div style={containerStyle}>
-            <div style={gridStyle}>
-                <AgGridReact
-                    treeData
-                    getDataPath={getDataPath}
-                    rowData={getData()}
-                    columnDefs={columnDefs}
-                    autoGroupColumnDef={autoGroupColumnDef}
-                    defaultColDef={defaultColDef}
-                    groupDefaultExpanded={1}
-                    onCellDoubleClicked={onCellDoubleClicked}
-                    onCellKeyDown={onCellKeyDown}
-                />
+        <AgGridProvider modules={modules}>
+            <div style={containerStyle}>
+                <div style={gridStyle}>
+                    <AgGridReact
+                        treeData
+                        getDataPath={getDataPath}
+                        rowData={getData()}
+                        columnDefs={columnDefs}
+                        autoGroupColumnDef={autoGroupColumnDef}
+                        defaultColDef={defaultColDef}
+                        groupDefaultExpanded={1}
+                        onCellDoubleClicked={onCellDoubleClicked}
+                        onCellKeyDown={onCellKeyDown}
+                    />
+                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag-with-parent-id/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag-with-parent-id/provided/reactFunctionalTs/index.tsx
index 0dabe7c44dd..08596568870 100644
--- a/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag-with-parent-id/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag-with-parent-id/provided/reactFunctionalTs/index.tsx
@@ -3,13 +3,7 @@
 import React, { StrictMode, useCallback, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import {
-    ClientSideRowModelModule,
-    ModuleRegistry,
-    RowApiModule,
-    RowDragModule,
-    ValidationModule,
-} from 'ag-grid-community';
+import { ClientSideRowModelModule, RowApiModule, RowDragModule, ValidationModule } from 'ag-grid-community';
 import type {
     GridOptions,
     RowDragEndEvent,
@@ -18,20 +12,20 @@ import type {
     ValueFormatterParams,
 } from 'ag-grid-community';
 import { TreeDataModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import type { IFile } from './fileUtils';
 import { getFileDropPosition, moveFiles } from './fileUtils';
 import './style.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelModule,
     RowApiModule,
     RowDragModule,
     TreeDataModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const STATIC_GRID_OPTIONS: GridOptions<IFile> = {
     columnDefs: [
@@ -106,14 +100,16 @@ const DragAndDropGrid = () => {
     }, []);
 
     return (
-        <AgGridReact<IFile>
-            ref={gridRef}
-            gridOptions={STATIC_GRID_OPTIONS}
-            rowData={rowData}
-            onRowDragMove={onRowDragMove}
-            onRowDragEnd={onRowDragEnd}
-            onRowDragCancel={onRowDragCancel}
-        />
+        <AgGridProvider modules={modules}>
+            <AgGridReact<IFile>
+                ref={gridRef}
+                gridOptions={STATIC_GRID_OPTIONS}
+                rowData={rowData}
+                onRowDragMove={onRowDragMove}
+                onRowDragEnd={onRowDragEnd}
+                onRowDragCancel={onRowDragCancel}
+            />
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag/provided/reactFunctionalTs/index.tsx
index dbce3f90520..b6f0e7b0bbe 100644
--- a/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag/provided/reactFunctionalTs/index.tsx
+++ b/documentation/ag-grid-docs/src/content/docs/tree-data-row-dragging/_examples/tree-unmanaged-row-drag/provided/reactFunctionalTs/index.tsx
@@ -6,13 +6,12 @@ import { createRoot } from 'react-dom/client';
 import {
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
-    ModuleRegistry,
     RowDragModule,
     ValidationModule,
 } from 'ag-grid-community';
 import type { GridOptions, RowDragEndEvent, RowDragMoveEvent, ValueFormatterParams } from 'ag-grid-community';
 import { TreeDataModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import { getData } from './data';
 import FileCellRenderer from './fileCellRenderer';
@@ -20,13 +19,13 @@ import { moveFiles } from './fileUtils';
 import type { IFile } from './fileUtils';
 import './style.css';
 
-ModuleRegistry.registerModules([
+const modules = [
     ClientSideRowModelApiModule,
     ClientSideRowModelModule,
     RowDragModule,
     TreeDataModule,
     ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
-]);
+];
 
 const STATIC_GRID_OPTIONS: GridOptions<IFile> = {
     columnDefs: [
@@ -98,14 +97,16 @@ const DragAndDropGrid = () => {
     }, [rowDataDragging]);
 
     return (
-        <AgGridReact<IFile>
-            gridOptions={STATIC_GRID_OPTIONS}
-            rowData={rowData}
-            onRowDragEnter={onRowDragEnter}
-            onRowDragMove={onRowDragMove}
-            onRowDragEnd={onRowDragEnd}
-            onRowDragCancel={onRowDragCancel}
-        />
+        <AgGridProvider modules={modules}>
+            <AgGridReact<IFile>
+                gridOptions={STATIC_GRID_OPTIONS}
+                rowData={rowData}
+                onRowDragEnter={onRowDragEnter}
+                onRowDragMove={onRowDragMove}
+                onRowDragEnd={onRowDragEnd}
+                onRowDragCancel={onRowDragCancel}
+            />
+        </AgGridProvider>
     );
 };
 
diff --git a/documentation/ag-grid-docs/src/images/back-to-top-icon.svg b/documentation/ag-grid-docs/src/images/back-to-top-icon.svg
new file mode 100644
index 00000000000..37594361614
--- /dev/null
+++ b/documentation/ag-grid-docs/src/images/back-to-top-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="m11 7.825l-4.9 4.9q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7l6.6-6.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l6.6 6.6q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L13 7.825V19q0 .425-.288.713T12 20t-.712-.288T11 19z"/></svg>
diff --git a/documentation/ag-grid-docs/src/images/on-this-page-icon.svg b/documentation/ag-grid-docs/src/images/on-this-page-icon.svg
new file mode 100644
index 00000000000..57bbbae83b5
--- /dev/null
+++ b/documentation/ag-grid-docs/src/images/on-this-page-icon.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.44434 12.6665H13.5554" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2.44434 3.3335H13.5554" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2.44434 8H7.33323" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>
diff --git a/packages/ag-grid-community/src/agStack/utils/string.ts b/packages/ag-grid-community/src/agStack/utils/string.ts
index 0b8f5374322..da4c4139da0 100644
--- a/packages/ag-grid-community/src/agStack/utils/string.ts
+++ b/packages/ag-grid-community/src/agStack/utils/string.ts
@@ -28,3 +28,24 @@ export function _escapeString(toEscape?: string | null): string | null {
 export function _isExpressionString(value: unknown): value is `=${string}` {
     return typeof value === 'string' && value.startsWith('=') && value.length > 1;
 }
+
+/**
+ * Converts a camelCase string into startCase
+ * @param {string} camelCase
+ * @returns {string}
+ */
+export function _camelCaseToHumanText(camelCase: string | undefined): string | null {
+    if (!camelCase || camelCase == null) {
+        return null;
+    }
+
+    // either split on a lowercase followed by uppercase ie  asHereTo -> as Here To
+    const rex = /([a-z])([A-Z])/g;
+    // or starts with uppercase and we take all expect the last which is assumed to be part of next word if followed by lowercase HEREToThere -> HERE To There
+    const rexCaps = /([A-Z]+)([A-Z])([a-z])/g;
+    const words: string[] = camelCase.replace(rex, '$1 $2').replace(rexCaps, '$1 $2$3').replace(/\./g, ' ').split(' ');
+
+    return words
+        .map((word) => word.substring(0, 1).toUpperCase() + (word.length > 1 ? word.substring(1, word.length) : ''))
+        .join(' ');
+}
diff --git a/packages/ag-grid-community/src/columns/columnNameService.ts b/packages/ag-grid-community/src/columns/columnNameService.ts
index 5c2a3543f01..f6c725000c0 100644
--- a/packages/ag-grid-community/src/columns/columnNameService.ts
+++ b/packages/ag-grid-community/src/columns/columnNameService.ts
@@ -1,3 +1,4 @@
+import { _camelCaseToHumanText } from '../agStack/utils/string';
 import type { NamedBean } from '../context/bean';
 import { BeanStub } from '../context/beanStub';
 import type { AgColumn } from '../entities/agColumn';
@@ -6,27 +7,6 @@ import type { AgProvidedColumnGroup } from '../entities/agProvidedColumnGroup';
 import type { AbstractColDef, ColDef, HeaderLocation, HeaderValueGetterParams } from '../entities/colDef';
 import { _addGridCommonParams } from '../gridOptionsUtils';
 
-/**
- * Converts a camelCase string into startCase
- * @param {string} camelCase
- * @returns {string}
- */
-function _camelCaseToHumanText(camelCase: string | undefined): string | null {
-    if (!camelCase || camelCase == null) {
-        return null;
-    }
-
-    // either split on a lowercase followed by uppercase ie  asHereTo -> as Here To
-    const rex = /([a-z])([A-Z])/g;
-    // or starts with uppercase and we take all expect the last which is assumed to be part of next word if followed by lowercase HEREToThere -> HERE To There
-    const rexCaps = /([A-Z]+)([A-Z])([a-z])/g;
-    const words: string[] = camelCase.replace(rex, '$1 $2').replace(rexCaps, '$1 $2$3').replace(/\./g, ' ').split(' ');
-
-    return words
-        .map((word) => word.substring(0, 1).toUpperCase() + (word.length > 1 ? word.substring(1, word.length) : ''))
-        .join(' ');
-}
-
 export class ColumnNameService extends BeanStub implements NamedBean {
     beanName = 'colNames' as const;
 
diff --git a/packages/ag-grid-community/src/interfaces/iModule.ts b/packages/ag-grid-community/src/interfaces/iModule.ts
index bd98ba08aea..7742ce07a1d 100644
--- a/packages/ag-grid-community/src/interfaces/iModule.ts
+++ b/packages/ag-grid-community/src/interfaces/iModule.ts
@@ -57,6 +57,11 @@ export type _ModuleWithoutApi = Module & {
     apiFunctions?: never;
 };
 
+/** Used by React to set the license key via React context if an enterprise module has been provided. */
+export type _ModuleWithLicenseManager = {
+    setLicenseKey: (licenseKey: string) => void;
+};
+
 type InternalModuleName =
     | 'Aggregation'
     | 'AnimationFrame'
diff --git a/packages/ag-grid-community/src/main-internal.ts b/packages/ag-grid-community/src/main-internal.ts
index 93fad24eeff..2557ea2ad17 100644
--- a/packages/ag-grid-community/src/main-internal.ts
+++ b/packages/ag-grid-community/src/main-internal.ts
@@ -179,7 +179,7 @@ export {
 export { _isEventFromPrintableCharacter } from './agStack/utils/keyboard';
 export { _getLocaleTextFromFunc, _getLocaleTextFromMap, _getLocaleTextFunc, _translate } from './agStack/utils/locale';
 export { _isPromise } from './agStack/utils/promise';
-export { _escapeString, _isExpressionString, _toString } from './agStack/utils/string';
+export { _escapeString, _isExpressionString, _toString, _camelCaseToHumanText } from './agStack/utils/string';
 export { AgWidgetSelectorType as _AgWidgetSelectorType } from './agStack/widgets/agWidgetSelectorType';
 export {
     _AdvancedFilterGridApi,
@@ -430,7 +430,12 @@ export type { AnimationFrameService } from './misc/animationFrameService';
 export { LocaleService } from './misc/locale/localeService';
 export { _setColMenuVisible } from './misc/menu/menuService';
 export type { MenuService } from './misc/menu/menuService';
-export { _getGridRegisteredModules, _registerModule, _setUmd } from './modules/moduleRegistry';
+export {
+    _getGridRegisteredModules,
+    _registerModule,
+    _setUmd,
+    _findEnterpriseCoreModule,
+} from './modules/moduleRegistry';
 export type { CellNavigationService } from './navigation/cellNavigationService';
 export type { HeaderNavigationService } from './navigation/headerNavigationService';
 export type { NavigationService } from './navigation/navigationService';
@@ -554,6 +559,7 @@ export {
     _ModuleWithApi,
     _ModuleWithoutApi,
     ValidationModuleName as _ValidationModuleName,
+    _ModuleWithLicenseManager,
 } from './interfaces/iModule';
 export { SharedMenuModule as _SharedMenuModule } from './misc/menu/sharedMenuModule';
 export { KeyboardNavigationModule as _KeyboardNavigationModule } from './navigation/navigationModule';
diff --git a/packages/ag-grid-community/src/modules/moduleRegistry.ts b/packages/ag-grid-community/src/modules/moduleRegistry.ts
index 4dcf2828f13..94d8b6413cd 100644
--- a/packages/ag-grid-community/src/modules/moduleRegistry.ts
+++ b/packages/ag-grid-community/src/modules/moduleRegistry.ts
@@ -1,4 +1,4 @@
-import type { Module, ModuleName } from '../interfaces/iModule';
+import type { Module, ModuleName, _ModuleWithLicenseManager } from '../interfaces/iModule';
 import type { RowModelType } from '../interfaces/iRowModel';
 import { _errorOnce } from '../utils/log';
 
@@ -145,3 +145,19 @@ export class ModuleRegistry {
         }
     }
 }
+
+export function _findEnterpriseCoreModule(modules: Module[]): _ModuleWithLicenseManager | undefined {
+    for (const module of modules) {
+        if ('setLicenseKey' in module) {
+            return module as _ModuleWithLicenseManager;
+        }
+
+        if (module.dependsOn) {
+            const found = _findEnterpriseCoreModule(module.dependsOn);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+}
diff --git a/packages/ag-grid-enterprise/src/agGridEnterpriseModule.ts b/packages/ag-grid-enterprise/src/agGridEnterpriseModule.ts
index 4978e84a81b..f7e3937ef7d 100644
--- a/packages/ag-grid-enterprise/src/agGridEnterpriseModule.ts
+++ b/packages/ag-grid-enterprise/src/agGridEnterpriseModule.ts
@@ -1,4 +1,4 @@
-import type { _ModuleWithoutApi } from 'ag-grid-community';
+import type { _ModuleWithLicenseManager, _ModuleWithoutApi } from 'ag-grid-community';
 
 import { GridLicenseManager as LicenseManager } from './license/gridLicenseManager';
 import { VERSION } from './version';
@@ -6,7 +6,7 @@ import { VERSION } from './version';
 /**
  * @internal
  */
-export const EnterpriseCoreModule: _ModuleWithoutApi = {
+export const EnterpriseCoreModule: _ModuleWithoutApi & _ModuleWithLicenseManager = {
     moduleName: 'EnterpriseCore',
     version: VERSION,
     beans: [LicenseManager],
@@ -30,4 +30,5 @@ export const EnterpriseCoreModule: _ModuleWithoutApi = {
         columnDrag: 'grip',
     },
     dependsOn: [],
+    setLicenseKey: LicenseManager.setLicenseKey,
 };
diff --git a/packages/ag-grid-react/src/index.ts b/packages/ag-grid-react/src/index.ts
index 9bf2d28473d..bcfeea0c107 100644
--- a/packages/ag-grid-react/src/index.ts
+++ b/packages/ag-grid-react/src/index.ts
@@ -3,3 +3,5 @@ export * from './shared/interfaces';
 export * from './shared/customComp/interfaces';
 export * from './shared/customComp/util';
 export { CustomContext as CustomComponentContext } from './shared/customComp/customContext';
+export type { AgGridProviderProps } from './reactUi/agGridProvider';
+export { AgGridProvider } from './reactUi/agGridProvider';
diff --git a/packages/ag-grid-react/src/reactUi/agGridProvider.tsx b/packages/ag-grid-react/src/reactUi/agGridProvider.tsx
new file mode 100644
index 00000000000..91318e3f262
--- /dev/null
+++ b/packages/ag-grid-react/src/reactUi/agGridProvider.tsx
@@ -0,0 +1,66 @@
+import React, { useContext, useRef } from 'react';
+
+import { _areEqual } from 'ag-grid-community';
+import type { Module } from 'ag-grid-community';
+
+export interface AgGridProviderProps {
+    /**
+     * The AG Grid Modules to be used by all grid instances within this provider.
+     */
+    modules: Module[];
+    /**
+     * The AG Grid license key to be used by all grid instances within this provider when Enterprise features are used.
+     */
+    licenseKey?: string;
+    /**
+     * The child components that will have access to the AG Grid context.
+     */
+    children: React.ReactNode;
+}
+
+export const ModulesContext = React.createContext<Module[]>([]);
+export const LicenseContext = React.createContext<string | undefined>(undefined);
+
+/**
+ * Provide AG Grid Modules to all grid instances within this scope via React Context. If nested, modules are accumulated from all providers and provided to each AgGridReact instance.
+ *
+ * If a licenseKey is provided it will be passed to the global `LicenseManager.setLicenseKey(licenseKey)`.
+ *
+ * This is an alternative to providing modules globally via `ModuleRegistry.registerModules()` and setting the license key via `LicenseManager.setLicenseKey()`.
+ */
+export function AgGridProvider({ modules, licenseKey, children }: Readonly<AgGridProviderProps>) {
+    const parentModules = useContext(ModulesContext);
+    const parentLicenseKey = useContext(LicenseContext);
+
+    const modulesRef = useRef<Module[]>(modules);
+    const parentModulesRef = useRef<Module[]>(parentModules);
+    const mergedModules = useRef<Module[]>([...parentModules, ...modules]);
+
+    const parentModulesChanged = !_areEqual(parentModulesRef.current, parentModules);
+    if (parentModulesChanged) {
+        parentModulesRef.current = parentModules;
+    }
+    const modulesChanged = !_areEqual(modulesRef.current, modules);
+    if (modulesChanged) {
+        modulesRef.current = modules;
+    }
+
+    // The grid handles duplicated modules so no need to worry about that here
+    // Only update the ref if modules have changed.
+    // Assuming that the order of modules will be stable between renders so not going to do any sorting here.
+    if (parentModulesChanged || modulesChanged) {
+        mergedModules.current = [...parentModulesRef.current, ...modulesRef.current];
+    }
+
+    // Use this provider's licenseKey if provided, otherwise inherit from parent
+    // We cannot safely set the licenseKey here as enterprise modules my have been provided to the
+    // AGGridReact component directly and so the list of modules we have access to here may not have the
+    // license manager on them.
+    const effectiveLicenseKey = licenseKey ?? parentLicenseKey;
+
+    return (
+        <ModulesContext.Provider value={mergedModules.current}>
+            <LicenseContext.Provider value={effectiveLicenseKey}>{children}</LicenseContext.Provider>
+        </ModulesContext.Provider>
+    );
+}
diff --git a/packages/ag-grid-react/src/reactUi/agGridReactUi.tsx b/packages/ag-grid-react/src/reactUi/agGridReactUi.tsx
index 8553c127e59..7bae01d17e5 100644
--- a/packages/ag-grid-react/src/reactUi/agGridReactUi.tsx
+++ b/packages/ag-grid-react/src/reactUi/agGridReactUi.tsx
@@ -20,6 +20,7 @@ import type {
     IDetailCellRenderer,
     IDetailCellRendererCtrl,
     IDetailCellRendererParams,
+    Module,
     WrappableInterface,
 } from 'ag-grid-community';
 import {
@@ -27,6 +28,7 @@ import {
     GridCoreCreator,
     VanillaFrameworkOverrides,
     _combineAttributesAndGridOptions,
+    _findEnterpriseCoreModule,
     _getGridOption,
     _getGridRegisteredModules,
     _isClientSideRowModel,
@@ -53,6 +55,7 @@ import { warnReactiveCustomComponents } from '../shared/customComp/util';
 import type { AgGridReactProps, InternalAgGridReactProps } from '../shared/interfaces';
 import { PortalManager } from '../shared/portalManager';
 import { ReactComponent } from '../shared/reactComponent';
+import { LicenseContext, ModulesContext } from './agGridProvider';
 import { BeansContext, RenderModeContext } from './beansContext';
 import GridComp from './gridComp';
 import { RenderStatusService } from './renderStatusService';
@@ -80,6 +83,9 @@ const excludeReactCompProps = new Set(Object.keys(reactPropsNotGridOptions));
 const deprecatedReactCompProps = new Set(Object.keys(deprecatedProps));
 
 export const AgGridReactUi = <TData,>(props: InternalAgGridReactProps<TData>) => {
+    const modulesFromContext = useContext(ModulesContext);
+    const licenseKeyFromContext = useContext(LicenseContext);
+
     const apiRef = useRef<GridApi<TData>>();
     const eGui = useRef<HTMLDivElement | null>(null);
     const portalManager = useRef<PortalManager | null>(null);
@@ -133,7 +139,12 @@ export const AgGridReactUi = <TData,>(props: InternalAgGridReactProps<TData>) =>
             return;
         }
 
-        const modules = props.modules || [];
+        const modules: Module[] = [...(props.modules ?? []), ...(modulesFromContext ?? [])];
+        if (licenseKeyFromContext) {
+            // find the EnterpriseCore module which implements _ModuleWithLicenseManager
+            // if found, set the license key
+            _findEnterpriseCoreModule(modules)?.setLicenseKey(licenseKeyFromContext);
+        }
 
         if (!portalManager.current) {
             portalManager.current = new PortalManager(
diff --git a/plugins/ag-grid-generate-example-files/src/executors/generate/generator/transformation-scripts/grid-vanilla-to-react-functional-ts.ts b/plugins/ag-grid-generate-example-files/src/executors/generate/generator/transformation-scripts/grid-vanilla-to-react-functional-ts.ts
index d2c49091bf2..50fff6ec52a 100644
--- a/plugins/ag-grid-generate-example-files/src/executors/generate/generator/transformation-scripts/grid-vanilla-to-react-functional-ts.ts
+++ b/plugins/ag-grid-generate-example-files/src/executors/generate/generator/transformation-scripts/grid-vanilla-to-react-functional-ts.ts
@@ -37,7 +37,7 @@ function getModuleImports(
     const imports = [
         "import React, { useCallback, useMemo, useRef, useState, StrictMode } from 'react';",
         "import { createRoot } from 'react-dom/client';",
-        "import { AgGridReact } from 'ag-grid-react';",
+        "import { AgGridReact, AgGridProvider } from 'ag-grid-react';",
     ];
 
     if (allStylesheets && allStylesheets.length > 0) {
@@ -66,10 +66,6 @@ function getModuleImports(
 
     imports.push(getEnableAGTestIdLogic());
 
-    if (bindings.moduleRegistration) {
-        imports.push(bindings.moduleRegistration);
-    }
-
     return removeCreateGridImport(imports);
 }
 
@@ -92,6 +88,16 @@ function getImports(
     if (useFetchHook) {
         imports.push(`import { useFetchJson } from './useFetchJson';`);
     }
+
+    if (bindings.moduleRegistration) {
+        // Modules registration is different in React - we just export the modules array and pass it to AgGridProvider
+        const reactModuleRegistration = bindings.moduleRegistration.replace(
+            /ModuleRegistry\.registerModules\(\s*\[([\s\S]*?)\]\s*\);/,
+            'const modules = [$1];'
+        );
+        imports.push('\n');
+        imports.push(reactModuleRegistration);
+    }
     return imports;
 }
 
@@ -375,9 +381,11 @@ ${gridReady}${useFetchHook ?? ''}${darkModeWithGridRef ? '\n' + darkModeWithGrid
 ${[].concat(eventHandlers, externalEventHandlers, instanceMethods).join('\n\n   ')}
 
     return  (
-            <div ${containerStyle}>
-                ${template}
-            </div>
+            <AgGridProvider modules={modules}>
+                <div ${containerStyle}>
+                    ${template}
+                </div>
+            </AgGridProvider>
         );
 
 }
diff --git a/testing/behavioural/src/modules/enterprise-modules.test.ts b/testing/behavioural/src/modules/enterprise-modules.test.ts
index 5cb504b194c..4fd43bbc704 100644
--- a/testing/behavioural/src/modules/enterprise-modules.test.ts
+++ b/testing/behavioural/src/modules/enterprise-modules.test.ts
@@ -1,38 +1,11 @@
 import type { Module } from 'ag-grid-community';
-import { AllCommunityModule } from 'ag-grid-community';
+import { AllCommunityModule, _findEnterpriseCoreModule } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
 
 function collectAllModuleNames(modules: Module[] | undefined): Set<string> {
     return new Set<string>([...(modules?.map((m) => m.moduleName) ?? [])]);
 }
 
-/**
- * Recursively checks if a module has EnterpriseCoreModule in its dependency chain.
- * @param module - The module to check
- * @param visited - Set of visited module names to avoid infinite loops
- * @returns true if EnterpriseCoreModule is found in the dependency chain
- */
-function hasEnterpriseCoreModuleDependency(module: Module, visited: Set<string> = new Set()): boolean {
-    if (visited.has(module.moduleName)) {
-        return false;
-    }
-    visited.add(module.moduleName);
-
-    if (module.moduleName === 'EnterpriseCore') {
-        return true;
-    }
-
-    if (module.dependsOn && module.dependsOn.length > 0) {
-        for (const dep of module.dependsOn) {
-            if (hasEnterpriseCoreModuleDependency(dep, visited)) {
-                return true;
-            }
-        }
-    }
-
-    return false;
-}
-
 /**
  * Finds a module by name from a module's dependency tree.
  * @param moduleName - The name of the module to find
@@ -85,12 +58,35 @@ describe('Enterprise Modules', () => {
             const module = findModuleByName(moduleName, AllEnterpriseModule);
 
             expect(module).toBeDefined();
-            expect(hasEnterpriseCoreModuleDependency(module!)).toBe(true);
+            const entCore = _findEnterpriseCoreModule([module!]);
+            expect(entCore).toBeDefined();
+            expect(entCore?.setLicenseKey).toBeDefined();
         });
 
         test('EnterpriseCoreModule exists in AllEnterpriseModule dependency tree', () => {
-            const enterpriseCoreModule = findModuleByName('EnterpriseCore', AllEnterpriseModule);
-            expect(enterpriseCoreModule).toBeDefined();
+            const entCore = _findEnterpriseCoreModule([AllEnterpriseModule]);
+            expect(entCore).toBeDefined();
+            expect(entCore?.setLicenseKey).toBeDefined();
+        });
+
+        test('Find EnterpriseCoreModule when lots of modules provided', () => {
+            const entCore = _findEnterpriseCoreModule([
+                ...AllCommunityModule.dependsOn!,
+                ...AllEnterpriseModule.dependsOn!,
+            ]);
+            expect(entCore).toBeDefined();
+            expect(entCore?.setLicenseKey).toBeDefined();
+        });
+
+        test('Find EnterpriseCoreModule when duplicate modules', () => {
+            const entCore = _findEnterpriseCoreModule([
+                ...AllCommunityModule.dependsOn!,
+                ...AllCommunityModule.dependsOn!,
+                ...AllEnterpriseModule.dependsOn!,
+                ...AllEnterpriseModule.dependsOn!,
+            ]);
+            expect(entCore).toBeDefined();
+            expect(entCore?.setLicenseKey).toBeDefined();
         });
     });
 });
diff --git a/testing/behavioural/src/modules/module-registry-global-with-react-context.test.tsx b/testing/behavioural/src/modules/module-registry-global-with-react-context.test.tsx
new file mode 100644
index 00000000000..81c20dcea21
--- /dev/null
+++ b/testing/behavioural/src/modules/module-registry-global-with-react-context.test.tsx
@@ -0,0 +1,158 @@
+import { cleanup, render } from '@testing-library/react';
+import React from 'react';
+
+import type { GridApi, GridReadyEvent, Module } from 'ag-grid-community';
+import {
+    ClientSideRowModelModule,
+    CsvExportModule,
+    ModuleRegistry,
+    PaginationModule,
+    TooltipModule,
+    ValidationModule,
+} from 'ag-grid-community';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
+
+// Register modules globally at file level - this ensures consistent state for all tests in this file
+ModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule]);
+
+async function renderGridWithModules(
+    propsModules: Module[] | undefined,
+    providerModules: Module[] | undefined
+): Promise<{ api: GridApi }> {
+    let readyResolve!: (api: GridApi) => void;
+    const readyPromise = new Promise<GridApi>((resolve) => {
+        readyResolve = resolve;
+    });
+
+    const gridElement = (
+        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+            <AgGridReact
+                columnDefs={[{ field: 'value' }]}
+                rowData={[{ value: 'a' }]}
+                modules={propsModules}
+                onGridReady={(params: GridReadyEvent) => {
+                    readyResolve(params.api);
+                }}
+            />
+        </div>
+    );
+
+    render(
+        providerModules !== undefined ? (
+            <AgGridProvider modules={providerModules}>{gridElement}</AgGridProvider>
+        ) : (
+            gridElement
+        )
+    );
+
+    const api = await readyPromise;
+    return { api };
+}
+
+describe('ModuleRegistry.registerModules() + AgGridProvider compatibility', () => {
+    beforeEach(() => {
+        cleanup();
+    });
+
+    test('grid receives modules from both ModuleRegistry and AgGridProvider', async () => {
+        const { api } = await renderGridWithModules(undefined, [PaginationModule, TooltipModule]);
+
+        // Should have core modules from global registry
+        expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+        // Should have modules from AgGridProvider
+        expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+        expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+    });
+
+    test('grid receives modules from ModuleRegistry, props, and AgGridProvider', async () => {
+        const { api } = await renderGridWithModules(
+            [PaginationModule], // from props
+            [TooltipModule, CsvExportModule] // from provider
+        );
+
+        // Should have functionality from all three sources
+        expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true); // global
+        expect(api.isModuleRegistered('ValidationModule')).toBe(true); // global
+        expect(api.isModuleRegistered('PaginationModule')).toBe(true); // props
+        expect(api.isModuleRegistered('TooltipModule')).toBe(true); // provider
+        expect(api.isModuleRegistered('CsvExportModule')).toBe(true); // provider
+    });
+
+    test('both branches inherit globally registered modules from ModuleRegistry', async () => {
+        let ready1Resolve!: (api: GridApi) => void;
+        let ready2Resolve!: (api: GridApi) => void;
+        const ready1Promise = new Promise<GridApi>((resolve) => {
+            ready1Resolve = resolve;
+        });
+        const ready2Promise = new Promise<GridApi>((resolve) => {
+            ready2Resolve = resolve;
+        });
+
+        render(
+            <div>
+                {/* Branch 1 with its own AgGridProvider */}
+                <AgGridProvider modules={[PaginationModule]}>
+                    <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-1">
+                        <AgGridReact
+                            columnDefs={[{ field: 'value' }]}
+                            rowData={[{ value: 'branch1' }]}
+                            onGridReady={(params: GridReadyEvent) => {
+                                ready1Resolve(params.api);
+                            }}
+                        />
+                    </div>
+                </AgGridProvider>
+
+                {/* Branch 2 with its own AgGridProvider */}
+                <AgGridProvider modules={[TooltipModule]}>
+                    <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-2">
+                        <AgGridReact
+                            columnDefs={[{ field: 'value' }]}
+                            rowData={[{ value: 'branch2' }]}
+                            onGridReady={(params: GridReadyEvent) => {
+                                ready2Resolve(params.api);
+                            }}
+                        />
+                    </div>
+                </AgGridProvider>
+            </div>
+        );
+
+        const [api1, api2] = await Promise.all([ready1Promise, ready2Promise]);
+
+        // Both branches should have the globally registered modules
+        expect(api1.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        expect(api2.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        expect(api1.isModuleRegistered('ValidationModule')).toBe(true);
+        expect(api2.isModuleRegistered('ValidationModule')).toBe(true);
+
+        // Branch 1 should have its provider-specific module (PaginationModule)
+        expect(api1.isModuleRegistered('PaginationModule')).toBe(true);
+
+        // Branch 2 should have its provider-specific module (TooltipModule)
+        expect(api2.isModuleRegistered('TooltipModule')).toBe(true);
+
+        // Branch 1 should NOT have TooltipModule (only in Branch 2's provider)
+        expect(api1.isModuleRegistered('TooltipModule')).toBe(false);
+
+        // Branch 2 should NOT have PaginationModule (only in Branch 1's provider)
+        expect(api2.isModuleRegistered('PaginationModule')).toBe(false);
+    });
+
+    test('globally registered modules are available even with empty provider', async () => {
+        const { api } = await renderGridWithModules(undefined, []);
+
+        // Should have core modules from global registry even with empty provider
+        expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+    });
+
+    test('globally registered modules are available without any provider', async () => {
+        const { api } = await renderGridWithModules(undefined, undefined);
+
+        // Should have core modules from global registry
+        expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+    });
+});
diff --git a/testing/behavioural/src/modules/react-modules-provider.test.tsx b/testing/behavioural/src/modules/react-modules-provider.test.tsx
new file mode 100644
index 00000000000..eb0fa5ee6fc
--- /dev/null
+++ b/testing/behavioural/src/modules/react-modules-provider.test.tsx
@@ -0,0 +1,620 @@
+import { cleanup, render } from '@testing-library/react';
+import React from 'react';
+import { vi } from 'vitest';
+
+import type { GridApi, GridReadyEvent, Module } from 'ag-grid-community';
+import {
+    ClientSideRowModelModule,
+    CsvExportModule,
+    PaginationModule,
+    TooltipModule,
+    ValidationModule,
+} from 'ag-grid-community';
+import { ClipboardModule } from 'ag-grid-enterprise';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
+
+async function renderGridWithModules(
+    propsModules: Module[] | undefined,
+    providerModules: Module[] | undefined
+): Promise<{ api: GridApi }> {
+    let readyResolve!: (api: GridApi) => void;
+    const readyPromise = new Promise<GridApi>((resolve) => {
+        readyResolve = resolve;
+    });
+
+    const gridElement = (
+        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+            <AgGridReact
+                columnDefs={[{ field: 'value' }]}
+                rowData={[{ value: 'a' }]}
+                modules={propsModules}
+                onGridReady={(params: GridReadyEvent) => {
+                    readyResolve(params.api);
+                }}
+            />
+        </div>
+    );
+
+    render(
+        providerModules !== undefined ? (
+            <AgGridProvider modules={providerModules}>{gridElement}</AgGridProvider>
+        ) : (
+            gridElement
+        )
+    );
+
+    const api = await readyPromise;
+    return { api };
+}
+
+describe('Module Registration compatible with React context', () => {
+    beforeEach(() => {
+        cleanup();
+    });
+
+    describe('Modules from AgGridContext', () => {
+        test('grid receives modules from AgGridContext', async () => {
+            const { api } = await renderGridWithModules(
+                [ClientSideRowModelModule, ValidationModule],
+                [PaginationModule]
+            );
+
+            // Grid should have pagination module from AgGridContext
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+        });
+
+        test('grid receives modules from props', async () => {
+            const { api } = await renderGridWithModules(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule],
+                undefined
+            );
+
+            // Grid should have pagination module from props
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        });
+
+        test('grid combines modules from both props and AgGridContext', async () => {
+            const { api } = await renderGridWithModules(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule],
+                [TooltipModule, CsvExportModule]
+            );
+
+            // Grid should have modules from both props and context
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api.isModuleRegistered('CsvExportModule')).toBe(true);
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        });
+
+        test('grid works with modules only from AgGridContext (no props modules)', async () => {
+            const { api } = await renderGridWithModules(undefined, [
+                ClientSideRowModelModule,
+                ValidationModule,
+                PaginationModule,
+            ]);
+
+            // Grid should work with modules only from context
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+        });
+
+        test('empty AgGridContext modules does not break grid', async () => {
+            const { api } = await renderGridWithModules(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule],
+                []
+            );
+
+            // Grid should work normally with empty context modules
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+        });
+    });
+
+    describe('Module priority and deduplication', () => {
+        test('same module in both props and context does not cause issues', async () => {
+            // Both props and context provide PaginationModule
+            const { api } = await renderGridWithModules(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule],
+                [PaginationModule, TooltipModule]
+            );
+
+            // Grid should work normally without duplicate module errors
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+        });
+
+        test('modules from props and context are all registered', async () => {
+            // This test verifies both sources contribute modules
+            const { api } = await renderGridWithModules(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule],
+                [TooltipModule, CsvExportModule]
+            );
+
+            // All modules should be registered
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api.isModuleRegistered('CsvExportModule')).toBe(true);
+        });
+    });
+
+    describe('Nested AgGridProvider', () => {
+        async function renderNestedProviderGrid(
+            outerModules: Module[],
+            innerModules: Module[],
+            propsModules?: Module[]
+        ): Promise<{ api: GridApi }> {
+            let readyResolve!: (api: GridApi) => void;
+            const readyPromise = new Promise<GridApi>((resolve) => {
+                readyResolve = resolve;
+            });
+
+            render(
+                <AgGridProvider modules={outerModules}>
+                    <AgGridProvider modules={innerModules}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'a' }]}
+                                modules={propsModules}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    readyResolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+                </AgGridProvider>
+            );
+
+            const api = await readyPromise;
+            return { api };
+        }
+
+        test('inner AgGridProvider inherits and merges modules from outer AgGridProvider', async () => {
+            // Inner provider merges with outer provider modules
+            const { api } = await renderNestedProviderGrid(
+                [ClientSideRowModelModule, ValidationModule, CsvExportModule], // outer - has CsvExport
+                [TooltipModule] // inner - adds Tooltip
+            );
+
+            // Inner context modules should be registered
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            // CsvExport from outer context SHOULD be registered (merged)
+            expect(api.isModuleRegistered('CsvExportModule')).toBe(true);
+        });
+
+        test('inner AgGridProvider adds pagination to outer modules', async () => {
+            const { api } = await renderNestedProviderGrid(
+                [ClientSideRowModelModule, ValidationModule, TooltipModule], // outer - has tooltip
+                [PaginationModule] // inner - adds pagination
+            );
+
+            // Should have pagination from inner provider
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            // Tooltip from outer provider SHOULD be registered (merged)
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+        });
+
+        test('props modules combined with merged provider modules', async () => {
+            const { api } = await renderNestedProviderGrid(
+                [ClientSideRowModelModule, ValidationModule, CsvExportModule], // outer - core + CsvExport
+                [TooltipModule], // inner - adds tooltip
+                [PaginationModule] // props - pagination
+            );
+
+            // Props modules should be registered
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            // Inner provider modules should be registered
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+            // Outer provider modules SHOULD be registered (merged)
+            expect(api.isModuleRegistered('CsvExportModule')).toBe(true);
+        });
+
+        test('deeply nested AgGridProviders merge all modules', async () => {
+            let readyResolve!: (api: GridApi) => void;
+            const readyPromise = new Promise<GridApi>((resolve) => {
+                readyResolve = resolve;
+            });
+
+            render(
+                <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule]}>
+                    <AgGridProvider modules={[PaginationModule]}>
+                        <AgGridProvider modules={[TooltipModule]}>
+                            <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+                                <AgGridReact
+                                    columnDefs={[{ field: 'value' }]}
+                                    rowData={[{ value: 'a' }]}
+                                    modules={[CsvExportModule]}
+                                    onGridReady={(params: GridReadyEvent) => {
+                                        readyResolve(params.api);
+                                    }}
+                                />
+                            </div>
+                        </AgGridProvider>
+                    </AgGridProvider>
+                </AgGridProvider>
+            );
+
+            const api = await readyPromise;
+
+            // All modules from all levels should be merged
+            expect(api.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            expect(api.isModuleRegistered('ValidationModule')).toBe(true);
+            expect(api.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api.isModuleRegistered('CsvExportModule')).toBe(true);
+        });
+    });
+
+    describe('Separate component branches with different AgGridProvider', () => {
+        async function renderTwoGridsWithSeparateProviders(
+            branch1Modules: Module[],
+            branch2Modules: Module[]
+        ): Promise<{ api1: GridApi; api2: GridApi }> {
+            let ready1Resolve!: (api: GridApi) => void;
+            let ready2Resolve!: (api: GridApi) => void;
+            const ready1Promise = new Promise<GridApi>((resolve) => {
+                ready1Resolve = resolve;
+            });
+            const ready2Promise = new Promise<GridApi>((resolve) => {
+                ready2Resolve = resolve;
+            });
+
+            render(
+                <div>
+                    {/* Branch 1 with its own AgGridProvider */}
+                    <AgGridProvider modules={branch1Modules}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-1">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch1' }]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready1Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+
+                    {/* Branch 2 with its own AgGridProvider */}
+                    <AgGridProvider modules={branch2Modules}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-2">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch2' }]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready2Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+                </div>
+            );
+
+            const [api1, api2] = await Promise.all([ready1Promise, ready2Promise]);
+            return { api1, api2 };
+        }
+
+        test('two sibling branches can use completely different modules', async () => {
+            const { api1, api2 } = await renderTwoGridsWithSeparateProviders(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule], // Branch 1: pagination
+                [ClientSideRowModelModule, ValidationModule, TooltipModule] // Branch 2: tooltip
+            );
+
+            // Branch 1 should have pagination but not tooltip
+            expect(api1.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api1.isModuleRegistered('TooltipModule')).toBe(false);
+
+            // Branch 2 should have tooltip but not pagination
+            expect(api2.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api2.isModuleRegistered('PaginationModule')).toBe(false);
+        });
+
+        test('two sibling branches can have overlapping modules with differences', async () => {
+            const { api1, api2 } = await renderTwoGridsWithSeparateProviders(
+                [ClientSideRowModelModule, ValidationModule, PaginationModule, CsvExportModule], // Branch 1
+                [ClientSideRowModelModule, ValidationModule, PaginationModule, TooltipModule] // Branch 2
+            );
+
+            // Both branches should have common modules
+            expect(api1.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api2.isModuleRegistered('PaginationModule')).toBe(true);
+
+            // Branch 1 should have CsvExport but not Tooltip
+            expect(api1.isModuleRegistered('CsvExportModule')).toBe(true);
+            expect(api1.isModuleRegistered('TooltipModule')).toBe(false);
+
+            // Branch 2 should have Tooltip but not CsvExport
+            expect(api2.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api2.isModuleRegistered('CsvExportModule')).toBe(false);
+        });
+
+        test('changes to one branch context do not affect the other branch', async () => {
+            // This test ensures isolation between the two contexts
+            const { api1, api2 } = await renderTwoGridsWithSeparateProviders(
+                [ClientSideRowModelModule, ValidationModule], // Branch 1: minimal modules
+                [ClientSideRowModelModule, ValidationModule, PaginationModule, TooltipModule, CsvExportModule] // Branch 2: many modules
+            );
+
+            // Branch 1 should only have core modules
+            expect(api1.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            expect(api1.isModuleRegistered('PaginationModule')).toBe(false);
+            expect(api1.isModuleRegistered('TooltipModule')).toBe(false);
+            expect(api1.isModuleRegistered('CsvExportModule')).toBe(false);
+
+            // Branch 2 should have all its modules
+            expect(api2.isModuleRegistered('ClientSideRowModelModule')).toBe(true);
+            expect(api2.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api2.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api2.isModuleRegistered('CsvExportModule')).toBe(true);
+        });
+
+        test('multiple grids in same provider share modules while different providers are isolated', async () => {
+            let ready1Resolve!: (api: GridApi) => void;
+            let ready2Resolve!: (api: GridApi) => void;
+            let ready3Resolve!: (api: GridApi) => void;
+            const ready1Promise = new Promise<GridApi>((resolve) => {
+                ready1Resolve = resolve;
+            });
+            const ready2Promise = new Promise<GridApi>((resolve) => {
+                ready2Resolve = resolve;
+            });
+            const ready3Promise = new Promise<GridApi>((resolve) => {
+                ready3Resolve = resolve;
+            });
+
+            render(
+                <div>
+                    {/* Branch 1 with two grids sharing the same provider */}
+                    <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule, PaginationModule]}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-1a">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch1-grid1' }]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready1Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-1b">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch1-grid2' }]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready2Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+
+                    {/* Branch 2 with different provider */}
+                    <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule, TooltipModule]}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-2">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch2' }]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready3Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+                </div>
+            );
+
+            const [api1a, api1b, api2] = await Promise.all([ready1Promise, ready2Promise, ready3Promise]);
+
+            // Both grids in Branch 1 should have the same modules
+            expect(api1a.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api1b.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api1a.isModuleRegistered('TooltipModule')).toBe(false);
+            expect(api1b.isModuleRegistered('TooltipModule')).toBe(false);
+
+            // Grid in Branch 2 should have different modules
+            expect(api2.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api2.isModuleRegistered('PaginationModule')).toBe(false);
+        });
+
+        test('sibling branches with props modules combined with different provider modules', async () => {
+            let ready1Resolve!: (api: GridApi) => void;
+            let ready2Resolve!: (api: GridApi) => void;
+            const ready1Promise = new Promise<GridApi>((resolve) => {
+                ready1Resolve = resolve;
+            });
+            const ready2Promise = new Promise<GridApi>((resolve) => {
+                ready2Resolve = resolve;
+            });
+
+            render(
+                <div>
+                    {/* Branch 1: provider provides Pagination, props provide CsvExport */}
+                    <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule, PaginationModule]}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-1">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch1' }]}
+                                modules={[CsvExportModule]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready1Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+
+                    {/* Branch 2: provider provides Tooltip, props provide CsvExport */}
+                    <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule, TooltipModule]}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper-2">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'branch2' }]}
+                                modules={[CsvExportModule]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    ready2Resolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+                </div>
+            );
+
+            const [api1, api2] = await Promise.all([ready1Promise, ready2Promise]);
+
+            // Both branches should have CsvExport from props
+            expect(api1.isModuleRegistered('CsvExportModule')).toBe(true);
+            expect(api2.isModuleRegistered('CsvExportModule')).toBe(true);
+
+            // Branch 1 should have Pagination from context but not Tooltip
+            expect(api1.isModuleRegistered('PaginationModule')).toBe(true);
+            expect(api1.isModuleRegistered('TooltipModule')).toBe(false);
+
+            // Branch 2 should have Tooltip from context but not Pagination
+            expect(api2.isModuleRegistered('TooltipModule')).toBe(true);
+            expect(api2.isModuleRegistered('PaginationModule')).toBe(false);
+        });
+    });
+
+    describe('License key from AgGridProvider', () => {
+        test('license key provided without enterprise module produces no console errors', async () => {
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+            let readyResolve!: (api: GridApi) => void;
+            const readyPromise = new Promise<GridApi>((resolve) => {
+                readyResolve = resolve;
+            });
+
+            render(
+                <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule]} licenseKey="some-license-key">
+                    <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+                        <AgGridReact
+                            columnDefs={[{ field: 'value' }]}
+                            rowData={[{ value: 'a' }]}
+                            onGridReady={(params: GridReadyEvent) => {
+                                readyResolve(params.api);
+                            }}
+                        />
+                    </div>
+                </AgGridProvider>
+            );
+
+            await readyPromise;
+
+            // No enterprise module means no license validation, so no console errors
+            expect(consoleErrorSpy).not.toHaveBeenCalled();
+
+            consoleErrorSpy.mockRestore();
+        });
+
+        test('enterprise module provided without license key produces console error', async () => {
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+            let readyResolve!: (api: GridApi) => void;
+            const readyPromise = new Promise<GridApi>((resolve) => {
+                readyResolve = resolve;
+            });
+
+            render(
+                <AgGridProvider
+                    modules={[ClientSideRowModelModule, ValidationModule, ClipboardModule]}
+                    // No license key provided
+                >
+                    <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+                        <AgGridReact
+                            columnDefs={[{ field: 'value' }]}
+                            rowData={[{ value: 'a' }]}
+                            onGridReady={(params: GridReadyEvent) => {
+                                readyResolve(params.api);
+                            }}
+                        />
+                    </div>
+                </AgGridProvider>
+            );
+
+            await readyPromise;
+
+            // Enterprise module without license key should produce console error about missing license
+            expect(consoleErrorSpy).toHaveBeenCalled();
+            const errorCalls = consoleErrorSpy.mock.calls.flat().join(' ');
+            expect(errorCalls).toContain('AG Grid Enterprise License');
+            expect(errorCalls).toContain('License Key Not Found');
+
+            consoleErrorSpy.mockRestore();
+        });
+
+        test('enterprise module provided with license key produces console error', async () => {
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+            let readyResolve!: (api: GridApi) => void;
+            const readyPromise = new Promise<GridApi>((resolve) => {
+                readyResolve = resolve;
+            });
+
+            render(
+                <AgGridProvider
+                    modules={[ClientSideRowModelModule, ValidationModule, ClipboardModule]}
+                    licenseKey="some-license-key"
+                >
+                    <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+                        <AgGridReact
+                            columnDefs={[{ field: 'value' }]}
+                            rowData={[{ value: 'a' }]}
+                            onGridReady={(params: GridReadyEvent) => {
+                                readyResolve(params.api);
+                            }}
+                        />
+                    </div>
+                </AgGridProvider>
+            );
+
+            await readyPromise;
+
+            // Enterprise module without license key should produce console error about missing license
+            expect(consoleErrorSpy).toHaveBeenCalled();
+            const errorCalls = consoleErrorSpy.mock.calls.flat().join(' ');
+            expect(errorCalls).toContain('AG Grid Enterprise License');
+            expect(errorCalls).toContain('Invalid License Key'); // assuming 'some-license-key' is invalid but this message shows it has been processed
+
+            consoleErrorSpy.mockRestore();
+        });
+
+        test('nested AgGridProvider inherits license key from parent', async () => {
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+            let readyResolve!: (api: GridApi) => void;
+            const readyPromise = new Promise<GridApi>((resolve) => {
+                readyResolve = resolve;
+            });
+
+            render(
+                <AgGridProvider modules={[ClientSideRowModelModule, ValidationModule]} licenseKey="some-license-key">
+                    {/* Child provider adds enterprise module but doesn't specify license key */}
+                    <AgGridProvider modules={[ClipboardModule]}>
+                        <div style={{ width: 600, height: 400 }} data-testid="grid-wrapper">
+                            <AgGridReact
+                                columnDefs={[{ field: 'value' }]}
+                                rowData={[{ value: 'a' }]}
+                                onGridReady={(params: GridReadyEvent) => {
+                                    readyResolve(params.api);
+                                }}
+                            />
+                        </div>
+                    </AgGridProvider>
+                </AgGridProvider>
+            );
+
+            await readyPromise;
+
+            // Should have inherited license key from parent, so we should see Invalid License Key (not License Key Not Found)
+            expect(consoleErrorSpy).toHaveBeenCalled();
+            const errorCalls = consoleErrorSpy.mock.calls.flat().join(' ');
+            expect(errorCalls).toContain('AG Grid Enterprise License');
+            expect(errorCalls).toContain('Invalid License Key');
+
+            consoleErrorSpy.mockRestore();
+        });
+    });
+});