diff --git a/.storybook/components/DocsHeader.tsx b/.storybook/components/DocsHeader.tsx
index b8d0d828c2d..7de3d7ad5fc 100644
--- a/.storybook/components/DocsHeader.tsx
+++ b/.storybook/components/DocsHeader.tsx
@@ -72,7 +72,7 @@ export const InfoTable = ({
   const supportsClipboardApi = typeof ClipboardItem !== 'undefined';
 
   const handleCopy = async (e) => {
-    const importStatementCell = e.currentTarget.parentElement.querySelector('[data-import]');
+    const importStatementCell = e.currentTarget.parentElement.parentElement.querySelector('[data-import-cell]');
     if (supportsClipboardApi && importStatementCell) {
       const html = new Blob([importStatementCell.outerHTML], { type: 'text/html' });
       const text = new Blob([importStatementCell.outerText], { type: 'text/plain' });
@@ -89,7 +89,7 @@ export const InfoTable = ({
             <Label>Usage</Label>
           </th>
           <td data-import-cell={supportsClipboardApi}>
-            <Import moduleNames={[moduleName]} componentId={preparedMeta.componentId} />
+            <Import moduleName={moduleName} componentId={preparedMeta.componentId} />
             {supportsClipboardApi && (
               <Button
                 design={ButtonDesign.Transparent}
@@ -142,7 +142,12 @@ export const InfoTable = ({
               <Label>Subcomponents</Label>
             </th>
             <td data-import-cell={supportsClipboardApi}>
-              <Import moduleNames={subComps} componentId={preparedMeta.componentId} />
+              {subComps.map((subComp) => (
+                <>
+                  <Import key={subComp} moduleName={subComp} componentId={preparedMeta.componentId} />
+                  <br />
+                </>
+              ))}
               {supportsClipboardApi && (
                 <Button
                   design={ButtonDesign.Transparent}
diff --git a/.storybook/components/Import.tsx b/.storybook/components/Import.tsx
index 41e2a7dac81..ab4b880b112 100644
--- a/.storybook/components/Import.tsx
+++ b/.storybook/components/Import.tsx
@@ -1,10 +1,8 @@
-import { Fragment } from 'react';
-
 interface ImportStatementPropTypes {
   /**
-   * Names of module/component (e.g. "Button")
+   * Name of module/component (e.g. "Button")
    */
-  moduleNames?: string[];
+  moduleName?: string;
   /**
    * Package name (e.g. "@ui5/webcomponents-react")
    */
@@ -24,34 +22,23 @@ interface FromPathPropTypes extends Pick<ImportStatementPropTypes, 'packageName'
   deepPath?: null | undefined | DeepPath;
 }
 
-function FromPath({ packageName, deepPath }: FromPathPropTypes) {
+function FromPath({ packageName }: FromPathPropTypes) {
   return (
     <>
       <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>from</span>
       <span> </span>
-      <span style={{ color: 'rgb(0, 136, 0)', fontSize: '14px' }}>
-        {deepPath ? packageName.slice(0, -1) : packageName}
-        {deepPath && deepPath.path}
-        {deepPath && "'"}
-      </span>
+      <span style={{ color: 'rgb(0, 136, 0)', fontSize: '14px' }}>{packageName}</span>
       <span style={{ fontSize: '14px' }}>;</span>
-      {deepPath && <br />}
     </>
   );
 }
 
 FromPath.displayName = 'FromPath';
 
-export const ImportStatement = ({ moduleNames, packageName, defaultImport }: ImportStatementPropTypes) => {
-  if (!moduleNames) {
+export const ImportStatement = ({ moduleName, packageName, defaultImport }: ImportStatementPropTypes) => {
+  if (!moduleName) {
     return null;
   }
-  const isCompat = packageName.includes('compat');
-  const paths = isCompat
-    ? moduleNames.map((item) => {
-        return { path: `/dist/components/${item}/index.js`, moduleName: item };
-      })
-    : [null];
 
   return (
     <pre
@@ -68,45 +55,16 @@ export const ImportStatement = ({ moduleNames, packageName, defaultImport }: Imp
       }}
     >
       <code style={{ whiteSpace: 'pre' }}>
-        {!paths[0] && <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>import</span>}
-        {paths.map((deepPath) => {
-          if (!deepPath) {
-            return (
-              <span style={{ fontSize: '14px' }} key="0">
-                {!defaultImport && ' {'}
-                {moduleNames.length > 2 ? (
-                  <>
-                    {moduleNames.map((item) => {
-                      return (
-                        <Fragment key={item}>
-                          <br />
-                          &nbsp;&nbsp;
-                          {item},
-                        </Fragment>
-                      );
-                    })}
-                    <br />
-                  </>
-                ) : (
-                  <>&nbsp;{moduleNames.join(', ')}&nbsp;</>
-                )}
-                {!defaultImport && '} '}
-              </span>
-            );
-          } else {
-            return (
-              <Fragment key={deepPath.path}>
-                <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>import</span>
-                <span style={{ fontSize: '14px' }}>
-                  {' '}
-                  {'{'}&nbsp;{deepPath.moduleName}&nbsp;{'}'}{' '}
-                </span>
-                <FromPath packageName={packageName} deepPath={deepPath} />
-              </Fragment>
-            );
-          }
-        })}
-        {!paths[0] && <FromPath packageName={packageName} />}
+        <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>import</span>
+        <span style={{ fontSize: '14px' }}>
+          {!defaultImport && ' {'}
+          <>
+            &nbsp;&nbsp;
+            {moduleName}{' '}
+          </>
+          {!defaultImport && '} '}
+        </span>
+        <FromPath packageName={packageName} />
       </code>
     </pre>
   );
@@ -118,19 +76,19 @@ interface ImportProps {
   /**
    * Names of module/component (e.g. "Button")
    */
-  moduleNames: ImportStatementPropTypes['moduleNames'];
+  moduleName: ImportStatementPropTypes['moduleName'];
   componentId: string;
 }
 
 export const Import = (props: ImportProps) => {
-  const { componentId, moduleNames } = props;
+  const { componentId, moduleName } = props;
   const isChart = componentId.startsWith('charts-');
   const isCompat = componentId.startsWith('legacy-');
 
   return (
     <ImportStatement
-      moduleNames={moduleNames}
-      packageName={`'@ui5/webcomponents-react${isChart ? '-charts' : isCompat ? '-compat' : ''}'`}
+      moduleName={moduleName}
+      packageName={`'@ui5/webcomponents-react${isChart ? '-charts' : isCompat ? '-compat' : ''}/${moduleName}'`}
     />
   );
 };
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
index c91006c0ecf..c82d1618371 100644
--- a/.storybook/utils.ts
+++ b/.storybook/utils.ts
@@ -1,3 +1,4 @@
+import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal';
 import { useMemo } from 'react';
 // @ts-expect-error: storybook can handle this
 import cemAi from './custom-element-manifests/ai.json';
@@ -50,16 +51,16 @@ const replaceSubComps = {
   TableHeaderCellActionBase: ['TableHeaderCellActionAI'],
 };
 
-function findSubComponentsRecursively(moduleName: string, cem: any): string[] {
+function findSubComponentsRecursively(moduleName: string, cem: CEM.Package): string[] {
   const subComponentsSet = new Set<string>();
 
   const recursiveFind = (moduleName: string) => {
-    const module = cem?.modules.find((module: any) => module.path === `dist/${moduleName}.js`);
+    const module = cem?.modules.find((module: CEM.Module) => module.path === `dist/${moduleName}.js`);
     if (!module) return;
 
-    module.declarations.forEach((decl: any) => {
-      (decl.slots || []).forEach((slot: any) => {
-        (slot._ui5type?.references || []).forEach((ref: any) => {
+    module.declarations.forEach((decl: CEM.CustomElement) => {
+      (decl.slots || []).forEach((slot: CEM.Slot) => {
+        (slot._ui5type?.references || []).forEach((ref: CEM.TypeReference) => {
           const name = ref.name.replace(/^I([A-Z])/g, '$1');
           const subComps = replaceSubComps[name] || [name];
           subComps.forEach((subComp: string) => {
diff --git a/README.md b/README.md
index cf08d69743c..626232a8bee 100644
--- a/README.md
+++ b/README.md
@@ -94,12 +94,30 @@ Since version `v2.14.0` of `@ui5/webcomponents-react`, `@ui5/webcomponents-fiori
 - You want to use the [VariantManagement](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-variantmanagement--docs) component.
 - You import anything from the `@ui5/webcomponents-fiori` package.
 
-**Note:** Most popular bundlers enable tree-shaking for production builds, so there’s no difference in the final bundle size between the recommended and minimal installations.
-
 ```sh
 npm install @ui5/webcomponents-react @ui5/webcomponents
 ```
 
+**Note:** Most popular bundlers enable tree-shaking for production builds, so there’s no difference in the final bundle size between the recommended and minimal installations.
+
+> ⚠️ **Warning**
+>
+> If your bundler does **not** support tree-shaking, you must use **subpath imports**.
+>
+> Otherwise, since `@ui5/webcomponents-react` re-exports all components, **every component** (including those that depend on the `@ui5/webcomponents-fiori` package) will be included in your bundle, which will lead to errors due to the missing module.
+>
+> **✅ Do:**
+>
+> ```tsx
+> import { Button } from '@ui5/webcomponents-react/Button';
+> ```
+>
+> **❌ Don’t:**
+>
+> ```tsx
+> import { Button } from '@ui5/webcomponents-react';
+> ```
+
 ## End of Support for Version 1.x
 
 The support for version 1.x of `ui5-webcomponents-react` has ended on **July 1, 2025**. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs).
@@ -135,7 +153,7 @@ You can find a curated list of project templates and examples on our [Project Te
 2. Import the `ThemeProvider` component and wrap your root component with it:
 
    ```tsx
-   import { ThemeProvider } from '@ui5/webcomponents-react';
+   import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
    ...
    createRoot(document.getElementById('root') as HTMLElement).render(
      <ThemeProvider>
@@ -148,7 +166,7 @@ You can find a curated list of project templates and examples on our [Project Te
    For example, to use the `Button` component you need to import it:
 
    ```jsx
-   import { Button } from '@ui5/webcomponents-react'; // loads ui5-button wrapped in a ui5-webcomponents-react component
+   import { Button } from '@ui5/webcomponents-react/Button'; // loads ui5-button wrapped in a ui5-webcomponents-react component
    ```
 
 4. Add the imported component to your JSX:
diff --git a/docs/Welcome.mdx b/docs/Welcome.mdx
index ed23d6efbc4..195c1b75bc3 100644
--- a/docs/Welcome.mdx
+++ b/docs/Welcome.mdx
@@ -83,7 +83,7 @@ npm install @ui5/webcomponents-react @ui5/webcomponents
 In order to use `@ui5/webcomponents-react` you have to wrap your application's root component into the `ThemeProvider` component.
 
 ```tsx
-import { ThemeProvider } from '@ui5/webcomponents-react';
+import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
 ...
 createRoot(document.getElementById('root') as HTMLElement).render(
   <ThemeProvider>
@@ -96,7 +96,7 @@ Then you are ready to use `@ui5/webcomponents-react` and you can import the desi
 For example, to use the `Button` component you need to import it:
 
 ```jsx
-import { Button } from '@ui5/webcomponents-react'; // loads ui5-button wrapped in a ui5-webcomponents-react component
+import { Button } from '@ui5/webcomponents-react/Button'; // loads ui5-button wrapped in a ui5-webcomponents-react component
 ```
 
 Then, you can use the Button in your app:
@@ -161,8 +161,11 @@ Small app with a popover opened by clicking a button including type declarations
 
 ```tsx
 import { useState, useRef } from 'react';
-import type { ButtonPropTypes, PopoverDomRef, PopoverPropTypes } from '@ui5/webcomponents-react';
-import { ThemeProvider, Button, Popover } from '@ui5/webcomponents-react';
+import type { ButtonPropTypes } from '@ui5/webcomponents-react/Button';
+import type { PopoverDomRef, PopoverPropTypes } from '@ui5/webcomponents-react/Popover';
+import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
+import { Button } from '@ui5/webcomponents-react/Button';
+import { Popover } from '@ui5/webcomponents-react/Popover';
 
 export default function App() {
   const [open, setOpen] = useState<PopoverPropTypes['open']>(false);
diff --git a/docs/knowledge-base/FAQ.mdx b/docs/knowledge-base/FAQ.mdx
index 080b2e7009d..420eedc6a94 100644
--- a/docs/knowledge-base/FAQ.mdx
+++ b/docs/knowledge-base/FAQ.mdx
@@ -113,7 +113,7 @@ setCustomElementsScopingSuffix('demo');
 // app main file, e.g index.js, main.tsx, etc.
 import './scoping-config.js';
 // now, all other component imports - the scoping config import must be the first import of the app
-import { Button } from '@ui5/webcomponents-react';
+import { Button } from '@ui5/webcomponents-react/Button';
 // ...
 ```
 
diff --git a/docs/knowledge-base/Internationalization.mdx b/docs/knowledge-base/Internationalization.mdx
index a2f64956607..eb54e8f3a38 100644
--- a/docs/knowledge-base/Internationalization.mdx
+++ b/docs/knowledge-base/Internationalization.mdx
@@ -103,8 +103,8 @@ registerI18nLoader('myApp', 'de', async () => {
 
 Add the following import statement to the component where you want to use translated texts:
 
-```js
-import { useI18nBundle } from '@ui5/webcomponents-react-base';
+```ts
+import { useI18nBundle } from '@ui5/webcomponents-react-base/hooks';
 ```
 
 Now, you can use the `useI18nBundle` hook in your functional components in order to access the i18nBundle and get your
diff --git a/docs/knowledge-base/Public-Utils.mdx b/docs/knowledge-base/Public-Utils.mdx
index 149427647f5..81526b71346 100644
--- a/docs/knowledge-base/Public-Utils.mdx
+++ b/docs/knowledge-base/Public-Utils.mdx
@@ -24,7 +24,7 @@ The `@ui5/webcomponents-react-base` package is providing a couple of utils, whic
 
 ## Device
 
-<Source code={`import { Device } from '@ui5/webcomponents-react-base';`} />
+<Source code={`import * as Device from '@ui5/webcomponents-react-base/Device';`} />
 
 The `Device` allows you to detect information about the environment where your app is running:
 
@@ -73,7 +73,7 @@ The `Device` allows you to detect information about the environment where your a
 
 ## Theming Parameters
 
-<Source code={`import { ThemingParameters } from '@ui5/webcomponents-react-base';`} />
+<Source code={`import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';`} />
 
 By using the global `--sap...` CSS variables, you can define the look and feel of your application without the need to hard-code any
 colors. The `ThemingParameters` is an JS object containing all available CSS variables mapped to their name.
@@ -98,14 +98,14 @@ Is equivalent to:
 
 ### `useI18nBundle`
 
-<Source code={`import { useI18nBundle } from '@ui5/webcomponents-react-base';`} />
+<Source code={`import { useI18nBundle } from '@ui5/webcomponents-react-base/hooks';`} />
 
 The `useI18nBundle` hook can be used for adding internationalization to your application. Learn more about it in our
 [Internationalization Guide](?path=/docs/knowledge-base-internationalization--docs).
 
 ### `useViewportRange`
 
-<Source code={`import { useViewportRange } from '@ui5/webcomponents-react-base';`} />
+<Source code={`import { useViewportRange } from '@ui5/webcomponents-react-base/hooks';`} />
 
 The `useViewportRange` hook is a utility hook based on the `Device.getCurrentRange()` and `Device.attachMediaHandler` API.
 It will always return a string with the name of the currently active range.
diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx
index 7a0095cc7d8..f7187637059 100644
--- a/docs/knowledge-base/Styling.mdx
+++ b/docs/knowledge-base/Styling.mdx
@@ -72,7 +72,7 @@ In order to reuse our central styling approach, you can import the `ThemingParam
 You can then create a custom component by following this recipe:
 
 ```tsx
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
 import './MyCustomElement.css';
 
 export const MyCustomElement = () => {
diff --git a/packages/base/src/hooks/useSyncRef.ts b/packages/base/src/hooks/useSyncRef.ts
index 0d9113af365..f5b99c27010 100644
--- a/packages/base/src/hooks/useSyncRef.ts
+++ b/packages/base/src/hooks/useSyncRef.ts
@@ -10,11 +10,8 @@ import { useCallback, useRef } from 'react';
  * ```tsx
  * const MyComponent = forwardRef<HTMLDivElement, PropTypes>((props, ref) => {
  *   const [componentRef, localRef] = useSyncRef<HTMLDivElement>(ref);
- *
- *   useEffect(() => {
- *     // `localRef.current` is always the latest DOM node (or `null`)
- *     console.log('current node:', localRef.current);
- *   }, []);
+ *   // `localRef.current` is always the latest DOM node (or `null`)
+ *   console.log('current node:', localRef.current);
  *
  *   return <div ref={componentRef}>Hello World!</div>;
  * });
diff --git a/packages/compat/README.md b/packages/compat/README.md
index 45c8ccb2282..4326b1dbf53 100644
--- a/packages/compat/README.md
+++ b/packages/compat/README.md
@@ -31,20 +31,27 @@ We strongly recommend migrating fully to the v2 `Table`, especially if the `Filt
 Importing components from the root (`import { Toolbar } from "@ui5/webcomponents-react-compat"`) is discouraged.
 The primary reason is that tree-shaking capabilities are limited in the default configurations of most bundlers in dev mode. As a result, custom elements for the v1 table will still be defined, even if only the `Toolbar` is imported. This can cause unexpected behavior if the v2 table is also used in the same app.
 
-E.g.:
+Following are the imports of duplicate custom element names:
+
+- `Table` (`ui5-table`): `import '@ui5/webcomponents-compat/dist/Table.js';`
+- `TableCell` (`ui5-table-cell`): `import "@ui5/webcomponents-compat/dist/TableCell.js";`
+- `TableRow` (`ui5-table-row`): `import "@ui5/webcomponents-compat/dist/TableRow.js";`
+
+To avoid issues, please always import components from the compat package via the file path.
+
+**Before v2.14.0:**
 
 - `import { Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';`
 - `import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';`
 
-In case you're still facing issues with the custom element definitions of the `Table` in development environments, you can add the web component import before any other component import in your application.
+**Since v2.14.0:**
 
-Following are the imports of duplicate custom element names:
+- `import { Table } from '@ui5/webcomponents-react-compat/Table';`
+- `import { Toolbar } from '@ui5/webcomponents-react-compat/Toolbar';`
 
-- `Table` (`ui5-table`): `import '@ui5/webcomponents-compat/dist/Table.js';`
-- `TableCell` (`ui5-table-cell`): `import "@ui5/webcomponents-compat/dist/TableCell.js";`
-- `TableRow` (`ui5-table-row`): `import "@ui5/webcomponents-compat/dist/TableRow.js";`
+In case you're still facing issues with the custom element definitions of the `Table` in development environments, please consider using compat package scoping.
 
-### Using the Compat (v1) Table Together with the v2 Table in One Application
+### Compat Scoping: Using the Compat (v1) Table Together with the v2 Table in One Application
 
 As of **v2.12.0** of `@ui5/webcomponents-compat`, a dedicated **scoping mechanism** is available for custom elements from the compat package.
 
@@ -60,65 +67,9 @@ setCompatCustomElementsScopingSuffix('compat');
 // app main file, e.g index.js, main.tsx, etc.
 import './scoping.js';
 // now, all other component imports - the scoping config import must be the first import of the app
-import { Table } from '@ui5/webcomponents-react-compat';
+import { Table } from '@ui5/webcomponents-react-compat/Table';
 ```
 
-### Experimental Patch Script (deprecated)
-
-> ⚠️ **Deprecated**: This script is deprecated in favor of scoping the "compat" package components!
-
-The `patch-compat-table` script (included in the `@ui5/webcomponents-react-cli` package) is developed to address specific compatibility issues that arise when using the legacy v1 Table component in conjunction with the `FilterBar` or `VariantManagement` components. These components internally rely on the v2 `Table`, and therefore conflicts will occur when using the v1 `Table`.
-The script will change the custom element name by adding a `-v1` suffix (via [patch-package](https://github.com/ds300/patch-package)) to all duplicate v1 table components.
-
-> ⚠️ **Temporary Solution:** This script is intended as a temporary workaround. It is strongly recommended to plan for a migration to the v2 Table component to ensure long-term compatibility and support.
-
-<details style="cursor:auto;">
-
-<summary><h4 style="display: inline; margin: 0; font-size:18px; cursor:pointer;">Using the script</h4></summary>
-
-<br />
-
-**What it does**
-
-<p>The script patches the <code>@ui5/webcomponents-compat</code> and <code>@ui5/webcomponents-react-compat</code> table component and subcomponents to render with a different custom element name (tag name) compared to the v2 implementation.
-This is done internally using <code>patch-package</code> to adjust the implementation in the <b>node_modules</b>.</p>
-
-<p>⚠️ <b>Note:</b> Since the tag names and the related attribute are changed, any CSS selectors targeting these tags must be updated accordingly!</p>
-
-**How to use**
-
-<p><b>Install</b> the <code>@ui5/webcomponents-react-cli</code> and <code>@ui5/webcomponents-compat</code> packages:</p>
-
-```
-// install `@ui5/webcomponents-compat` explicitly
-npm i @ui5/webcomponents-react-cli @ui5/webcomponents-compat
-```
-
-<p><b>Run</b> the script:</p>
-
-```
-// ui5-wcr is an executable added by the `@ui5/webcomponents-react-cli` package
-ui5-wcr patch-compat-table
-```
-
-<p>The <code>ui5-wcr</code> executable is provided by the <code>@ui5/webcomponents-react-cli</code> package. The <code>patch-compat-table</code> command applies the necessary patches.</p>
-
-<p><b>Recommendation:</b></p>
-
-<p>Add the script as <code>postinstall</code> script in the <code>package.json</code>, so it runs after every module update.</p>
-
-```
-{
-  "//": "rest of your applications package.json",
-  "scripts": {
-    "//": "your other scripts",
-    "postinstall": "ui5-wcr patch-compat-table"
-  }
-}
-```
-
-</details>
-
 ## Documentation
 
 You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/) (Legacy Components).
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.mdx
index b6e3a8e4786..4d34677e08b 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.mdx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.mdx
@@ -1,13 +1,12 @@
-import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
-import { Canvas, Meta, Description } from '@storybook/addon-docs/blocks';
-import * as ComponentStories from './AnalyticalTableHooks.stories';
+import { Footer } from '@sb/components';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { ImportStatement } from '@sb/components/Import';
 
-<Meta of={ComponentStories} />
+<Meta title="Data Display / AnalyticalTable / Plugin Hooks"/>
 
 # Plugin Hooks
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'* as AnalyticalTableHooks'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} defaultImport />
 
 We're offering plugin hooks to extend the functionality of the `AnalyticalTable` component. The following hooks are available:
 
@@ -20,12 +19,18 @@ We're offering plugin hooks to extend the functionality of the `AnalyticalTable`
 
 ## Add a Plugin Hook to the AnalyticalTable
 
-Import the hooks from the `@ui5/webcomponents-react` package and incorporate them into your `AnalyticalTable` component by adding them to the `tableHooks` array.
+Import the hooks from the `@ui5/webcomponents-react/AnalyticalTableHooks` package and incorporate them into your `AnalyticalTable` component by adding them to the `tableHooks` array.
 
 **Example:**
 
 ```jsx
-<AnalyticalTable {...otherProps} tableHooks={[AnalyticalTableHooks.useAnnounceEmptyCells]} />
+import {useAnnounceEmptyCells} from '@ui5/webcomponents-react/AnalyticalTableHooks';
+
+const tableHooks = [useAnnounceEmptyCells]; // this array should be memoized
+
+//...
+
+<AnalyticalTable {...otherProps} tableHooks={tableHooks} />
 ```
 
-<Footer />
+<Footer/>
diff --git a/packages/main/src/components/AnalyticalTable/PluginAnnounceEmptyCells.mdx b/packages/main/src/components/AnalyticalTable/PluginAnnounceEmptyCells.mdx
index 5438e5180a6..65918403ae0 100644
--- a/packages/main/src/components/AnalyticalTable/PluginAnnounceEmptyCells.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginAnnounceEmptyCells.mdx
@@ -7,7 +7,7 @@ import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 # AnalyticalTable Plugin: useAnnounceEmptyCells
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'useAnnounceEmptyCells'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} />
 
 The `useAnnounceEmptyCells` plugin hook adds screen reader announcements for empty cells.
 
@@ -18,7 +18,7 @@ The `useAnnounceEmptyCells` plugin hook adds screen reader announcements for emp
 <Canvas sourceState="none" of={ComponentStories.PluginAnnounceEmptyCells} />
 
 ```jsx
-const tableHooks = [AnalyticalTableHooks.useAnnounceEmptyCells] // this array should be memoized
+const tableHooks = [useAnnounceEmptyCells] // this array should be memoized
 
 <AnalyticalTable
   data={data}
diff --git a/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx b/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx
index 9150ba5bcfa..5c3cf3c60ad 100644
--- a/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx
@@ -7,7 +7,7 @@ import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 # AnalyticalTable Plugin: useRowDisableSelection
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'useRowDisableSelection'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} />
 <hr />
 
 **Deprecated!** It is not recommended to disable table rows, mainly because of the following reasons:
@@ -33,9 +33,8 @@ With the `useRowDisableSelection` it's possible to disable the selection of spec
 
 ```jsx
 const disableRowFunc = (row) => row.original.age < 40;
-const tableHooks = [
-  AnalyticalTableHooks.useRowDisableSelection(disableRowFunc),
-];
+const tableHooks = [useRowDisableSelection(disableRowFunc)]; // this array should be memoized
+
 const WithFunctionParameter = () => {
 
   return (
@@ -60,9 +59,8 @@ const data = [
   },
   //...
 ];
-const tableHooks = [
-  AnalyticalTableHooks.useRowDisableSelection("disableSelection"),
-];
+const tableHooks = [useRowDisableSelection("disableSelection")]; // this array should be memoized
+
 const WithStringParameter = () => {
   return (
     <AnalyticalTable
diff --git a/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx b/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx
index 117fd17a014..3a592a23711 100644
--- a/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx
@@ -8,7 +8,7 @@ import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 # AnalyticalTable Plugin: useIndeterminateRowSelection
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'useIndeterminateRowSelection'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} />
 
 The `useIndeterminateRowSelection` plugin hook allows marking parent rows as indeterminate when a child row is selected.
 When using this hook, it is recommended to also select all sub-rows when selecting a row. (`reactTableOptions={{ selectSubRows: true }}`)
@@ -33,7 +33,7 @@ When using this hook, it is recommended to also select all sub-rows when selecti
 <Canvas sourceState="none" of={ComponentStories.PluginIndeterminateRowSelection} />
 
 ```jsx
-const tableHooks = [AnalyticalTableHooks.useIndeterminateRowSelection()]; // should be memoized
+const tableHooks = [useIndeterminateRowSelection()]; // should be memoized
 
 <AnalyticalTable
   selectionMode={AnalyticalTableSelectionMode.Multiple}
diff --git a/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx b/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx
index 06326b0b1a7..b35ad6a6804 100644
--- a/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx
@@ -7,7 +7,7 @@ import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 # AnalyticalTable Plugin: useManualRowSelect
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'useManualRowSelect'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} />
 
 The `useManualRowSelect` plugin hook allows controlling the selected rows manually. It accepts a parameter (`manualRowSelectedKey`) which defaults to `isSelected`.
 If this key is found on the original data row, and it is `true`, this row will be manually selected.
diff --git a/packages/main/src/components/AnalyticalTable/PluginOnColumnResize.mdx b/packages/main/src/components/AnalyticalTable/PluginOnColumnResize.mdx
index 2b02b012d1d..b9c4af3f366 100644
--- a/packages/main/src/components/AnalyticalTable/PluginOnColumnResize.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginOnColumnResize.mdx
@@ -7,7 +7,7 @@ import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 # AnalyticalTable Plugin: useOnColumnResize
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'useOnColumnResize'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} />
 
 The `useOnColumnResize` plugin hook allows firing a callback when a columns size has changed by dragging the "Resizer".
 The first parameter is the callback itself (`e: { columnWidth: number; header: Record<string, any> }) => void;`), the second one are the optional `options` for controlling how often the callback should fire.
@@ -29,7 +29,7 @@ const TableComponent = (props) => {
 
   const tableHooks = useMemo(
     () => [
-      AnalyticalTableHooks.useOnColumnResize(handleColumResize, {
+      useOnColumnResize(handleColumResize, {
         liveUpdate: false,
         wait: 100,
       }),
diff --git a/packages/main/src/components/AnalyticalTable/PluginOrderedMultiSort.mdx b/packages/main/src/components/AnalyticalTable/PluginOrderedMultiSort.mdx
index ed1d1f9f6c4..cac92e0a00e 100644
--- a/packages/main/src/components/AnalyticalTable/PluginOrderedMultiSort.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginOrderedMultiSort.mdx
@@ -7,7 +7,7 @@ import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 # AnalyticalTable Plugin: useOrderedMultiSort
 
-<ImportStatement moduleNames={['AnalyticalTableHooks']} packageName={'@ui5/webcomponents-react'} />
+<ImportStatement moduleName={'useOrderedMultiSort'} packageName={'@ui5/webcomponents-react/AnalyticalTableHooks'} />
 
 With the `useOrderedMultiSort` it's possible to define the sorting priority if multi-sort is enabled for the respective columns (`enableMultiSort: true`).
 
@@ -64,7 +64,7 @@ const data = [
   { name: 'Graham', age: 62, name2: 'Willis', age2: 26 }
 ];
 const orderedIds = ['name', 'name2', 'age', 'age2'];
-const tableHooks = [AnalyticalTableHooks.useOrderedMultiSort(orderedIds)]; // should be memoized
+const tableHooks = [useOrderedMultiSort(orderedIds)]; // should be memoized
 const TableComponent = () => {
   return (
     <AnalyticalTable
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 4785dd441b6..068871001ed 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -108,14 +108,15 @@ const measureElement = (el: HTMLElement) => {
  * __Note:__ The `AnalyticalTable` has some limitations and includes features that do not have a defined design specification.
  * To follow UXC guidelines, please refer to the table below:
  *
- *| Function / Feature                 | Reason                                                                                                                        |
- *|------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
- *| No sticky columns/rows             | Not supported due to technical limitations.                                                                                   |
- *| Pop-in behavior                    | The `sap.ui.table` doesn’t support pop-in behavior (unlike `sap.m.Table`); it’s unclear whether this should be part of the design. |
- *| `visibleRowCountMode: "Auto"`      | `"AutoWithEmptyRows"` is preferred. `"Auto"` mode can lead to inconsistent table heights depending on the container.          |
- *| `alwaysShowBusyIndicator`          | Should generally be `true`, only if loading times are over 1 second, the default skeleton loading indicator is sufficient: [Fiori Skeleton Loading](https://www.sap.com/design-system/fiori-design-ios/ui-elements/patterns/skeleton-loading/?external). |
- *| `scaleWidthMode`                   | Only the default mode is available out of the box for the `sap.m.Table`; similar behavior to the `"Grow"` mode can be achieved in `sap.ui.table` using `autoResizeColumn`.|
- *| `renderRowSubComponent`            | There is no design concept regarding this functionality.                                                                      |
+ *| Function / Feature                    | Reason                                                                                                                                                                                                                                                   |
+ *|---------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+ *| No sticky columns/rows                | Not supported due to technical limitations.                                                                                                                                                                                                              |
+ *| Pop-in behavior                       | The `sap.ui.table` doesn’t support pop-in behavior (unlike `sap.m.Table`); it’s unclear whether this should be part of the design.                                                                                                                       |
+ *| `visibleRowCountMode: "Auto"`         | `"AutoWithEmptyRows"` is preferred. `"Auto"` mode can lead to inconsistent table heights depending on the container.                                                                                                                                     |
+ *| `alwaysShowBusyIndicator`             | Should generally be `true`, only if loading times are over 1 second, the default skeleton loading indicator is sufficient: [Fiori Skeleton Loading](https://www.sap.com/design-system/fiori-design-ios/ui-elements/patterns/skeleton-loading/?external). |
+ *| `scaleWidthMode`                      | Only the default mode is available out of the box for the `sap.m.Table`; similar behavior to the `"Grow"` mode can be achieved in `sap.ui.table` using `autoResizeColumn`.                                                                               |
+ *| `renderRowSubComponent`               | There is no design concept regarding this functionality.                                                                                                                                                                                                 |
+ *| `useRowDisableSelection` (deprecated) | Table rows should not be disabled.                                                                                                                                                                                                                       |
  */
 const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTypes>((props, ref) => {
   const {
diff --git a/packages/main/src/components/Modals/Modals.mdx b/packages/main/src/components/Modals/Modals.mdx
index 1a51cc96fbb..830b66ddb38 100644
--- a/packages/main/src/components/Modals/Modals.mdx
+++ b/packages/main/src/components/Modals/Modals.mdx
@@ -18,7 +18,8 @@ Only one `Modals` component (`<Modals />`) should be rendered for each applicati
 Example for mounting the `Modals` component:
 
 ```jsx
-import { Modals, ThemeProvider } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
+import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
 ...
 const root = createRoot(document.getElementById("root"));
 root.render(
@@ -36,7 +37,7 @@ root.render(
 #### Usage
 
 ```typescript
-import { Modals } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
 
 const { ref, close } = Modals.showDialog(props, container);
 ```
@@ -68,7 +69,7 @@ The `showDialog` method returns an object with the following properties:
 #### Usage
 
 ```typescript
-import { Modals } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
 
 const { ref, close } = Modals.showPopover(props, container);
 ```
@@ -100,7 +101,7 @@ The `showPopover` method returns an object with the following properties:
 #### Usage
 
 ```typescript
-import { Modals } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
 
 const { ref, close } = Modals.showResponsivePopover(props, container);
 ```
@@ -134,7 +135,7 @@ The `showResponsivePopover` method returns an object with the following properti
 #### Usage
 
 ```typescript
-import { Modals } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
 
 const { ref, close } = Modals.showMenu(props, container);
 ```
@@ -166,7 +167,7 @@ The `Menu` method returns an object with the following properties:
 #### Usage
 
 ```typescript
-import { Modals } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
 
 const { ref, close } = Modals.showMessageBox(props, container);
 ```
@@ -198,7 +199,7 @@ The `showMessageBox` method returns an object with the following properties:
 #### Usage
 
 ```typescript
-import { Modals } from '@ui5/webcomponents-react';
+import { Modals } from '@ui5/webcomponents-react/Modals';
 
 const { ref } = Modals.showToast(props, container);
 ```
diff --git a/patterns/selection-assistant/SelectionAssistant.mdx b/patterns/selection-assistant/SelectionAssistant.mdx
index 51dd4d2f556..4304f8921d2 100644
--- a/patterns/selection-assistant/SelectionAssistant.mdx
+++ b/patterns/selection-assistant/SelectionAssistant.mdx
@@ -12,7 +12,7 @@ import {TextAreaSelectionAssistant} from "@/patterns/selection-assistant/TextAre
       <th>Usage</th>
       <th>
         <ImportStatement
-          moduleNames={['getElementSelection']}
+          moduleName={'getElementSelection'}
           packageName={'@ui5/webcomponents-base/dist/util/SelectionAssistant.js'}
           defaultImport
         />