diff --git a/samples/grids/grid/row-drag-base/src/index.tsx b/samples/grids/grid/row-drag-base/src/index.tsx
index db709392b3..8049d45950 100644
--- a/samples/grids/grid/row-drag-base/src/index.tsx
+++ b/samples/grids/grid/row-drag-base/src/index.tsx
@@ -2,39 +2,34 @@ import React, { useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 
-import { IgrGridModule, IgrRowDragEndEventArgs } from 'igniteui-react-grids';
+import { IgrRowDragEndEventArgs } from 'igniteui-react-grids';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 import { CustomersData } from './CustomersData';
 
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 
-const mods: any[] = [
-    IgrGridModule
-];
-mods.forEach((m) => m.register());
-
 export default function App() {
     const data = new CustomersData();
     const rightGridRef = useRef<IgrGrid>(null);
 
-    function onGridRowDragEnd(evt: IgrRowDragEndEventArgs): void {
-        const grid = evt.target as IgrGrid;
+    const onGridRowDragEnd = (evt: IgrRowDragEndEventArgs) => {
+        const leftGrid = evt.target as IgrGrid;
         const ghostElement = evt.detail.dragDirective.ghostElement;
         if (ghostElement != null) {
             const dragElementPos = ghostElement.getBoundingClientRect();
-            const gridPosition =  document.getElementById("rightGrid").getElementsByTagName("igc-grid")[0].getBoundingClientRect();
-            
+            const gridPosition = document.getElementById("rightGrid").getBoundingClientRect();
+
             const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
             const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
             if (withinXBounds && withinYBounds) {
-                grid.deleteRow(evt.detail.dragData.key);
+                leftGrid.deleteRow(evt.detail.dragData.key);
                 rightGridRef.current.addRow(evt.detail.dragData.data);
             }
         }
     }
 
     return (
-        <div className="container sample">      
+        <div className="container sample">
             <div className="container horizontal wrapper">
                 <IgrGrid data={data} width="40%" primaryKey='ID' autoGenerate={false} rowDraggable={true} onRowDragEnd={onGridRowDragEnd}>
                     <IgrColumn field="ID" width="100px"></IgrColumn>
@@ -64,9 +59,9 @@ export default function App() {
                 </IgrGrid>
             </div>
         </div>
-        );
+    );
 }
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App/>);
\ No newline at end of file
+root.render(<App />);
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx b/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
index ed8daf4bf6..07b74e65e6 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
+++ b/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
@@ -2,238 +2,231 @@ import React, { useRef } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 
-import {
-  IgrHierarchicalGridModule,
-} from "igniteui-react-grids";
 import {
   IgrHierarchicalGrid,
   IgrColumn,
   IgrRowIsland,
+  IgrRowDragEndEventArgs,
 } from "igniteui-react-grids";
 import { SingersData } from "./SingersData";
 
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 
-IgrHierarchicalGridModule.register();
-
 export default function App() {
   const singersData = new SingersData();
-  const hierarchicalGridRef = useRef<IgrHierarchicalGrid>(null); 
-  const hierarchicalGridRef2 = useRef<IgrHierarchicalGrid>(null);  
+  const rightHGridRef = useRef<IgrHierarchicalGrid>(null);
 
-  function RowDragEnd(evt: any){
-    const grid2 = hierarchicalGridRef2.current;
+  const RowDragEnd = (evt: IgrRowDragEndEventArgs) => {
+    const leftGrid = evt.target as IgrHierarchicalGrid;
     const ghostElement = evt.detail.dragDirective.ghostElement;
-        if (ghostElement != null) {
-            const dragElementPos = ghostElement.getBoundingClientRect();
-            const gridPosition = document.getElementById("hierarchicalGrid2").getElementsByTagName("igc-hierarchical-grid")[0].getBoundingClientRect();
-            
-            const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
-            const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
-            if (withinXBounds && withinYBounds) {                
-                const newData = [...grid2.data];
-                newData.push(evt.detail.dragData.data);
-                grid2.data = newData;               
-            }            
-        }
+    if (ghostElement != null) {
+      const dragElementPos = ghostElement.getBoundingClientRect();
+      const gridPosition = document.getElementById("hierarchicalGrid2").getBoundingClientRect();
+
+      const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
+      const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
+      if (withinXBounds && withinYBounds) {
+        leftGrid.deleteRow(evt.detail.dragData.key);
+        rightHGridRef.current.addRow(evt.detail.dragData.data);
+      }
+    }
   }
-  
+
   return (
     <div className="container sample ig-typography">
       <div className="container fill">
         <div className="container horizontal wrapper">
-        <IgrHierarchicalGrid
-          autoGenerate={false}
-          data={singersData}
-          primaryKey="ID"
-          id="hierarchicalGrid1"
-          width="40%"
-          ref={hierarchicalGridRef}
-          rowDraggable={true}
-          onRowDragEnd={RowDragEnd}
-        >          
-          <IgrColumn
-            field="Artist"
-            header="Artist"
-            dataType="string"
-            width="150px"
-          ></IgrColumn>
-          <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
-          <IgrColumn field="Debut" header="Debut" dataType="number"></IgrColumn>
-          <IgrColumn
-            field="GrammyNominations"
-            header="Grammy Nominations"
-            dataType="string"
-            width="200px"
-          ></IgrColumn>
-          <IgrColumn
-            field="GrammyAwards"
-            header="Grammy Awards"
-            dataType="string"
-            width="200px"
-          ></IgrColumn>
-          <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
+          <IgrHierarchicalGrid
+            autoGenerate={false}
+            data={singersData}
+            primaryKey="ID"
+            id="hierarchicalGrid1"
+            width="40%"
+            rowDraggable={true}
+            onRowDragEnd={RowDragEnd}
+          >
             <IgrColumn
-              field="Album"
-              header="Album"
+              field="Artist"
+              header="Artist"
               dataType="string"
+              width="150px"
             ></IgrColumn>
+            <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
+            <IgrColumn field="Debut" header="Debut" dataType="number"></IgrColumn>
             <IgrColumn
-              field="LaunchDate"
-              header="Launch Date"
-              dataType="date"
-            ></IgrColumn>
-            <IgrColumn
-              field="BillboardReview"
-              header="Billboard Review"
+              field="GrammyNominations"
+              header="Grammy Nominations"
               dataType="string"
+              width="200px"
             ></IgrColumn>
             <IgrColumn
-              field="USBillboard200"
-              header="US Billboard 200"
+              field="GrammyAwards"
+              header="Grammy Awards"
               dataType="string"
+              width="200px"
             ></IgrColumn>
-            <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
+            <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
               <IgrColumn
-                field="Number"
-                header="No."
+                field="Album"
+                header="Album"
                 dataType="string"
               ></IgrColumn>
               <IgrColumn
-                field="Title"
-                header="Title"
+                field="LaunchDate"
+                header="Launch Date"
+                dataType="date"
+              ></IgrColumn>
+              <IgrColumn
+                field="BillboardReview"
+                header="Billboard Review"
                 dataType="string"
               ></IgrColumn>
               <IgrColumn
-                field="Released"
-                header="Released"
-                dataType="date"
+                field="USBillboard200"
+                header="US Billboard 200"
+                dataType="string"
+              ></IgrColumn>
+              <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
+                <IgrColumn
+                  field="Number"
+                  header="No."
+                  dataType="string"
+                ></IgrColumn>
+                <IgrColumn
+                  field="Title"
+                  header="Title"
+                  dataType="string"
+                ></IgrColumn>
+                <IgrColumn
+                  field="Released"
+                  header="Released"
+                  dataType="date"
+                ></IgrColumn>
+                <IgrColumn
+                  field="Genre"
+                  header="Genre"
+                  dataType="string"
+                ></IgrColumn>
+              </IgrRowIsland>
+            </IgrRowIsland>
+            <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
+              <IgrColumn field="Tour" header="Tour" dataType="string"></IgrColumn>
+              <IgrColumn
+                field="StartedOn"
+                header="Started on"
+                dataType="string"
               ></IgrColumn>
               <IgrColumn
-                field="Genre"
-                header="Genre"
+                field="Location"
+                header="Location"
+                dataType="string"
+              ></IgrColumn>
+              <IgrColumn
+                field="Headliner"
+                header="Headliner"
                 dataType="string"
               ></IgrColumn>
             </IgrRowIsland>
-          </IgrRowIsland>
-          <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
-            <IgrColumn field="Tour" header="Tour" dataType="string"></IgrColumn>
-            <IgrColumn
-              field="StartedOn"
-              header="Started on"
-              dataType="string"
-            ></IgrColumn>
-            <IgrColumn
-              field="Location"
-              header="Location"
-              dataType="string"
-            ></IgrColumn>
-            <IgrColumn
-              field="Headliner"
-              header="Headliner"
-              dataType="string"
-            ></IgrColumn>
-          </IgrRowIsland>
-        </IgrHierarchicalGrid>
+          </IgrHierarchicalGrid>
 
-        <IgrHierarchicalGrid
-          autoGenerate={false}
-          data={[]}
-          primaryKey="ID"
-          ref={hierarchicalGridRef2}
-          id="hierarchicalGrid2"
-          width="40%"
-          emptyGridMessage="Drag and Drop a row from the left grid to this grid"
-        >          
-          <IgrColumn
-            field="Artist"
-            header="Artist"
-            dataType="string"
-            width="150px"
-          ></IgrColumn>
-          <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
-          <IgrColumn field="Debut" header="Debut" dataType="number"></IgrColumn>
-          <IgrColumn
-            field="GrammyNominations"
-            header="Grammy Nominations"
-            dataType="string"
-            width="200px"
-          ></IgrColumn>
-          <IgrColumn
-            field="GrammyAwards"
-            header="Grammy Awards"
-            dataType="string"
-            width="200px"
-          ></IgrColumn>
-          <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
+          <IgrHierarchicalGrid
+            autoGenerate={false}
+            data={[]}
+            primaryKey="ID"
+            ref={rightHGridRef}
+            id="hierarchicalGrid2"
+            width="40%"
+            emptyGridMessage="Drag and Drop a row from the left grid to this grid"
+          >
             <IgrColumn
-              field="Album"
-              header="Album"
+              field="Artist"
+              header="Artist"
               dataType="string"
+              width="150px"
             ></IgrColumn>
+            <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
+            <IgrColumn field="Debut" header="Debut" dataType="number"></IgrColumn>
             <IgrColumn
-              field="LaunchDate"
-              header="Launch Date"
-              dataType="date"
-            ></IgrColumn>
-            <IgrColumn
-              field="BillboardReview"
-              header="Billboard Review"
+              field="GrammyNominations"
+              header="Grammy Nominations"
               dataType="string"
+              width="200px"
             ></IgrColumn>
             <IgrColumn
-              field="USBillboard200"
-              header="US Billboard 200"
+              field="GrammyAwards"
+              header="Grammy Awards"
               dataType="string"
+              width="200px"
             ></IgrColumn>
-            <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
+            <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
               <IgrColumn
-                field="Number"
-                header="No."
+                field="Album"
+                header="Album"
                 dataType="string"
               ></IgrColumn>
               <IgrColumn
-                field="Title"
-                header="Title"
+                field="LaunchDate"
+                header="Launch Date"
+                dataType="date"
+              ></IgrColumn>
+              <IgrColumn
+                field="BillboardReview"
+                header="Billboard Review"
                 dataType="string"
               ></IgrColumn>
               <IgrColumn
-                field="Released"
-                header="Released"
-                dataType="date"
+                field="USBillboard200"
+                header="US Billboard 200"
+                dataType="string"
+              ></IgrColumn>
+              <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
+                <IgrColumn
+                  field="Number"
+                  header="No."
+                  dataType="string"
+                ></IgrColumn>
+                <IgrColumn
+                  field="Title"
+                  header="Title"
+                  dataType="string"
+                ></IgrColumn>
+                <IgrColumn
+                  field="Released"
+                  header="Released"
+                  dataType="date"
+                ></IgrColumn>
+                <IgrColumn
+                  field="Genre"
+                  header="Genre"
+                  dataType="string"
+                ></IgrColumn>
+              </IgrRowIsland>
+            </IgrRowIsland>
+            <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
+              <IgrColumn field="Tour" header="Tour" dataType="string"></IgrColumn>
+              <IgrColumn
+                field="StartedOn"
+                header="Started on"
+                dataType="string"
               ></IgrColumn>
               <IgrColumn
-                field="Genre"
-                header="Genre"
+                field="Location"
+                header="Location"
+                dataType="string"
+              ></IgrColumn>
+              <IgrColumn
+                field="Headliner"
+                header="Headliner"
                 dataType="string"
               ></IgrColumn>
             </IgrRowIsland>
-          </IgrRowIsland>
-          <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
-            <IgrColumn field="Tour" header="Tour" dataType="string"></IgrColumn>
-            <IgrColumn
-              field="StartedOn"
-              header="Started on"
-              dataType="string"
-            ></IgrColumn>
-            <IgrColumn
-              field="Location"
-              header="Location"
-              dataType="string"
-            ></IgrColumn>
-            <IgrColumn
-              field="Headliner"
-              header="Headliner"
-              dataType="string"
-            ></IgrColumn>
-          </IgrRowIsland>
-        </IgrHierarchicalGrid>
+          </IgrHierarchicalGrid>
+        </div>
       </div>
     </div>
-    </div>
   );
 }
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App/>);
+root.render(<App />);
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.tsx b/samples/grids/tree-grid/row-drag-base/src/index.tsx
index 678d297477..82ad8813ae 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.tsx
+++ b/samples/grids/tree-grid/row-drag-base/src/index.tsx
@@ -1,28 +1,22 @@
 import React, { useRef } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-
-import {
-  IgrTreeGridModule,
-} from "igniteui-react-grids";
 import {
   IgrTreeGrid,
   IgrColumn,
+  IgrRowDragEndEventArgs,
 } from "igniteui-react-grids";
 import { EmployeesNestedTreeData, EmployeesNestedTreeDataItem } from "./EmployeesNestedTreeData";
 
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 
-IgrTreeGridModule.register();
-
 export default function App() {
   const employeesData = new EmployeesNestedTreeData();
-  const treeGridRef = useRef<IgrTreeGrid>(null);
-  const treeGridRef2 = useRef<IgrTreeGrid>(null);
+  const rightTGridRef = useRef<IgrTreeGrid>(null);
 
-   // Recursive function to add the row and its children
-  function addRowAndChildren(row:EmployeesNestedTreeDataItem, newData:EmployeesNestedTreeDataItem[]) {
-    if(newData.includes(row)){
+  // Recursive function to add the row and its children
+  const addRowAndChildren = (row: EmployeesNestedTreeDataItem, newData: EmployeesNestedTreeDataItem[]) => {
+    if (newData.includes(row)) {
       return;
     }
     newData.push(row);
@@ -30,21 +24,23 @@ export default function App() {
     children.forEach(child => addRowAndChildren(child, newData));
   }
 
-  function RowDragEnd(evt: any) {
-    const grid2 = treeGridRef2.current;
+  const RowDragEnd = (evt: IgrRowDragEndEventArgs) => {
+    const leftGrid = evt.target as IgrTreeGrid;
     const ghostElement = evt.detail.dragDirective.ghostElement;
     if (ghostElement != null) {
       const dragElementPos = ghostElement.getBoundingClientRect();
-      const gridPosition = document.getElementById("treeGrid2").getElementsByTagName("igc-tree-grid")[0].getBoundingClientRect();
+      const gridPosition = document.getElementById("treeGrid2").getBoundingClientRect();
 
       const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
       const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
+
       if (withinXBounds && withinYBounds) {
-        
-        const newData = [...grid2.data];
+        const newData = [...rightTGridRef.current.data];
         const draggedRowData = evt.detail.dragData.data;
+
         addRowAndChildren(draggedRowData, newData);
-        grid2.data = newData;
+        rightTGridRef.current.data = newData;
+        leftGrid.deleteRow(evt.detail.dragData.key);
       }
     }
   }
@@ -60,7 +56,6 @@ export default function App() {
             foreignKey="ParentID"
             id="treeGrid"
             width="40%"
-            ref={treeGridRef}
             rowDraggable={true}
             onRowDragEnd={RowDragEnd}
           >
@@ -102,7 +97,7 @@ export default function App() {
             data={[]}
             primaryKey="ID"
             foreignKey="ParentID"
-            ref={treeGridRef2}
+            ref={rightTGridRef}
             id="treeGrid2"
             width="40%"
             emptyGridMessage="Drag and Drop a row from the left grid to this grid"
diff --git a/samples/layouts/tile-manager/actions/.eslintrc.js b/samples/layouts/tile-manager/actions/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/README.md b/samples/layouts/tile-manager/actions/README.md
new file mode 100644
index 0000000000..0b7d68eb6c
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [TileManager](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/actions" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/actions?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/actions
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/actions/package.json b/samples/layouts/tile-manager/actions/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/actions/public/index.html b/samples/layouts/tile-manager/actions/public/index.html
new file mode 100644
index 0000000000..0ebf27df03
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Actions</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/sandbox.config.json b/samples/layouts/tile-manager/actions/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/src/index.css b/samples/layouts/tile-manager/actions/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/src/index.tsx b/samples/layouts/tile-manager/actions/src/index.tsx
new file mode 100644
index 0000000000..dc3924b892
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/src/index.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import { IgrTileManager, IgrTile, IgrIconButton, registerIconFromText } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+export default class Actions extends React.Component<any, any> {
+
+  constructor(props: any) {
+    super(props);
+    const northEast =
+      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>';
+    registerIconFromText('north_east', northEast, 'material');
+    const southWest =
+      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M200-200v-400h80v264l464-464 56 56-464 464h264v80H200Z"/></svg>';
+    registerIconFromText('south_west', southWest, 'material');
+    const more =
+      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>';
+    registerIconFromText('more', more, 'material');
+    const chart =
+      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z"/></svg>';
+    registerIconFromText('chart', chart, 'material');
+  }
+
+  private onCustomOneClick = (event: React.MouseEvent) => {
+
+    const tile = (event.currentTarget as HTMLElement).closest('igc-tile');
+
+    if (tile) {
+      tile.maximized = !tile.maximized;
+
+      const actionsSlot = tile.querySelector('[slot="actions"]') as HTMLElement;
+      const currentBtn = event.currentTarget as HTMLElement;
+
+      if (currentBtn) {
+        if (
+          tile.maximized
+        ) {
+          currentBtn.setAttribute('name', 'south_west');
+          currentBtn.setAttribute('aria-label', 'collapse');
+
+          const chartBtn = document.createElement('igc-icon-button');
+          chartBtn.classList.add('additional-action');
+          chartBtn.setAttribute('slot', 'actions');
+          chartBtn.setAttribute('variant', 'flat');
+          chartBtn.setAttribute('collection', 'material');
+          chartBtn.setAttribute('name', 'chart');
+          chartBtn.setAttribute('aria-label', 'chart');
+
+          const moreBtn = document.createElement('igc-icon-button');
+          moreBtn.classList.add('additional-action');
+          moreBtn.setAttribute('slot', 'actions');
+          moreBtn.setAttribute('variant', 'flat');
+          moreBtn.setAttribute('collection', 'material');
+          moreBtn.setAttribute('name', 'more');
+          moreBtn.setAttribute('aria-label', 'more');
+
+          tile.append(chartBtn);
+          tile.append(moreBtn);
+        } else {
+          currentBtn.setAttribute('name', 'north_east');
+          currentBtn.setAttribute('aria-label', 'expand');
+
+          const additionalButtons =
+            actionsSlot.parentElement?.querySelectorAll('.additional-action');
+          additionalButtons?.forEach((btn) => btn.remove());
+        }
+      }
+    }
+  };
+
+  private onCustomTwoClick = (event: React.MouseEvent) => {
+      const tile = (event.currentTarget as HTMLElement).closest('igc-tile');
+
+      if (tile) {
+        tile.maximized = !tile.maximized;
+
+        const currentBtn = event.currentTarget as HTMLElement;
+
+        if (currentBtn) {
+          if (
+            tile.maximized
+          ) {
+            currentBtn.setAttribute('name', 'south_west');
+            currentBtn.setAttribute('aria-label', 'collapse');
+          }
+          else {
+            currentBtn.setAttribute('name', 'north_east');
+            currentBtn.setAttribute('aria-label', 'expand');
+          }
+        }
+      }
+  };
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <IgrTileManager id="tile-manager1" columnCount={2} gap="20px">
+          <IgrTile>
+            <h3 slot="title">Default Actions</h3>
+            <p>This tile has default actions and title.</p>
+          </IgrTile>
+          <IgrTile disableFullscreen>
+            <h3 slot="title">No Fullscreen Action</h3>
+            <p>Fullscreen is disabled via property.</p>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <h3 slot="title">Custom Actions</h3>
+            <IgrIconButton id="customOne" onClick={this.onCustomOneClick} slot="actions" variant="flat" collection="material" name="north_east"
+            aria-label="north_east"></IgrIconButton>
+            <p>Replace the default actions with custom ones, and include extra actions when the tile is maximized.</p>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <IgrIconButton id="customTwo" onClick={this.onCustomTwoClick} slot="actions" variant="flat" collection="material"
+            name="north_east" aria-label="north_east"></IgrIconButton>
+            <p>Display only custom actions in the header.</p>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <h3 slot="title">Only title</h3>
+            <p>Display only title in the header.</p>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <p>Content only.</p>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Actions/>);
diff --git a/samples/layouts/tile-manager/actions/src/layout.css b/samples/layouts/tile-manager/actions/src/layout.css
new file mode 100644
index 0000000000..eaaa9e641f
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/src/layout.css
@@ -0,0 +1,23 @@
+igc-tile-manager {
+  margin-bottom: 5px;
+}
+
+igc-tile:nth-child(n + 3):nth-child(-n + 4)::part(actions) {
+  padding: 13px 16px;
+}
+
+igc-tile:nth-child(n+3)::part(header) {
+  padding: 0px;
+}
+
+igc-tile:nth-child(5)::part(header) {
+  padding: 18px 0 18px 0;
+}
+
+p, igc-tile:nth-child(3) h3, igc-tile:nth-child(5) h3  {
+  margin-left: 20px;
+}
+
+igc-tile:nth-last-child(1) p {
+  margin-top: 30px;
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/src/react-app-env.d.ts b/samples/layouts/tile-manager/actions/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/actions/tsconfig.json b/samples/layouts/tile-manager/actions/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/tile-manager/columngap/.eslintrc.js b/samples/layouts/tile-manager/columngap/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/README.md b/samples/layouts/tile-manager/columngap/README.md
new file mode 100644
index 0000000000..ab8898adb7
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of column gap feature using [TileManager](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/columngap" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/columngap?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/columngap
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/columngap/package.json b/samples/layouts/tile-manager/columngap/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/columngap/public/index.html b/samples/layouts/tile-manager/columngap/public/index.html
new file mode 100644
index 0000000000..08b7fdd4b4
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Column Gap</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/sandbox.config.json b/samples/layouts/tile-manager/columngap/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/src/index.css b/samples/layouts/tile-manager/columngap/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/src/index.tsx b/samples/layouts/tile-manager/columngap/src/index.tsx
new file mode 100644
index 0000000000..475e3edae4
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/src/index.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import { IgrTileManager, IgrTile, IgrInput } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+export default class ColumnGap extends React.Component<any, any> {
+
+  private tileManagerRef = React.createRef<IgrTileManager>();
+  constructor(props: any) {
+    super(props);
+  }
+
+  private onInputChange = (event: CustomEvent) => {    
+    const tileManager = this.tileManagerRef.current;
+    const input = event.target as IgrInput;
+    switch (input.label) {
+      case 'Columns Number': tileManager.columnCount = parseInt(input.value);
+        break;
+      case 'Gap Size': tileManager.gap = input.value;
+        break;
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <div className="inputWrapper">
+          <IgrInput label="Columns Number" id="rowIn" onChange={this.onInputChange}></IgrInput>
+          <IgrInput label="Gap Size" placeholder="10px" onChange={this.onInputChange}></IgrInput>
+        </div>
+        <IgrTileManager id="tile-manager1" gap="10px" ref={this.tileManagerRef}>
+          <IgrTile disableFullscreen disableMaximize>
+            <div className="picture">
+              <img src="https://picsum.photos/1048/998" alt="picture" />
+            </div>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <div className="picture">
+              <img src="https://picsum.photos/1049/999" alt="picture" />
+            </div>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <div className="picture">
+              <img src="https://picsum.photos/1050/1000" alt="picture" />
+            </div>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <div className="picture">
+              <img src="https://picsum.photos/1051/1001" alt="picture" />
+            </div>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <div className="picture">
+              <img src="https://picsum.photos/1052/1002" alt="picture" />
+            </div>
+          </IgrTile>
+          <IgrTile disableFullscreen disableMaximize>
+            <div className="picture">
+              <img src="https://picsum.photos/1053/1003" alt="picture" />
+            </div>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<ColumnGap/>);
diff --git a/samples/layouts/tile-manager/columngap/src/layout.css b/samples/layouts/tile-manager/columngap/src/layout.css
new file mode 100644
index 0000000000..274995b96a
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/src/layout.css
@@ -0,0 +1,25 @@
+p {
+  font-size: 20px;
+  padding: 10px;
+}
+
+.sample {
+  overflow: auto;
+}
+
+igc-input {
+  width: min-content;
+  --ig-size: var(--ig-size-small);
+  margin-right: 50px;
+}
+
+img {
+  height: 100%;
+  width: 100%;
+}
+
+.inputWrapper{
+  display: flex;
+  margin-left: 22px;
+  margin-bottom: 12px;
+}
diff --git a/samples/layouts/tile-manager/columngap/src/react-app-env.d.ts b/samples/layouts/tile-manager/columngap/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/columngap/tsconfig.json b/samples/layouts/tile-manager/columngap/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/tile-manager/dragndrop/.eslintrc.js b/samples/layouts/tile-manager/dragndrop/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/README.md b/samples/layouts/tile-manager/dragndrop/README.md
new file mode 100644
index 0000000000..0cab1799d1
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Drag & drop feature using [TileManager](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/dragndrop" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/dragndrop?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/dragndrop
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/dragndrop/package.json b/samples/layouts/tile-manager/dragndrop/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/dragndrop/public/index.html b/samples/layouts/tile-manager/dragndrop/public/index.html
new file mode 100644
index 0000000000..f770466bcf
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Drag and drop</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/sandbox.config.json b/samples/layouts/tile-manager/dragndrop/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/src/index.css b/samples/layouts/tile-manager/dragndrop/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/src/index.tsx b/samples/layouts/tile-manager/dragndrop/src/index.tsx
new file mode 100644
index 0000000000..77e1479775
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/src/index.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import { IgrTileManager, IgrTile, IgrRadio, IgrRadioGroup } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import { IgcRadioChangeEventArgs } from "igniteui-webcomponents/components/radio/radio";
+
+export default class DragNDrop extends React.Component<any, any> {
+
+  private tileManagerRef = React.createRef<IgrTileManager>();
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  private onRadioChange = (event: CustomEvent<IgcRadioChangeEventArgs>) => {
+      const radio = event.target as IgrRadio;
+      this.tileManagerRef.current.dragMode = radio.value as any;
+  };
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <div className="radioWrapper">
+        <IgrRadioGroup id="dragMode" alignment="horizontal" onChange={this.onRadioChange}>
+          <IgrRadio name="dragMode" value="tile-header" checked>Tile-header</IgrRadio>
+          <IgrRadio name="dragMode" value="tile">Tile</IgrRadio>
+          <IgrRadio name="dragMode" value="none">None</IgrRadio>
+        </IgrRadioGroup>
+        </div>
+        <IgrTileManager drag-mode="tile-header" drag-action="slide" column-count="2" gap="20px" ref={this.tileManagerRef}>
+          <IgrTile>
+          <span slot="title">Tile 1 header</span>
+            <p>Content for Tile 1</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 2 header</span>
+            <p>Content for Tile 2</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 3 header</span>
+            <p>Content for Tile 3</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 4 header</span>
+            <p>Content for Tile 4</p>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<DragNDrop/>);
diff --git a/samples/layouts/tile-manager/dragndrop/src/layout.css b/samples/layouts/tile-manager/dragndrop/src/layout.css
new file mode 100644
index 0000000000..27df917d70
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/src/layout.css
@@ -0,0 +1,30 @@
+ span{
+  font-size: 30px;
+}
+
+igc-tile::part(header) {
+  border-bottom: 2px solid var(--ig-primary-700);
+}
+
+p {
+  font-size: 18px;
+  margin-left: 20px;
+  padding-top: 10px;
+}
+
+igc-radio-group {
+  margin-left: 22px;
+  width: fit-content;
+  padding: 4px 15px;
+  margin-bottom: 8px;
+  border: 2px solid var(--ig-primary-700);
+  background-color: var(--ig-gray-300);
+}
+
+igc-tile::part(dragging) {
+  color: yellow;
+}
+
+.radioWrapper {
+  display: flex;
+}
diff --git a/samples/layouts/tile-manager/dragndrop/src/react-app-env.d.ts b/samples/layouts/tile-manager/dragndrop/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/dragndrop/tsconfig.json b/samples/layouts/tile-manager/dragndrop/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/tile-manager/layout/.eslintrc.js b/samples/layouts/tile-manager/layout/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/README.md b/samples/layouts/tile-manager/layout/README.md
new file mode 100644
index 0000000000..3355bd176c
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [TileManager](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/layout" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/layout?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/layout
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/layout/package.json b/samples/layouts/tile-manager/layout/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/layout/public/index.html b/samples/layouts/tile-manager/layout/public/index.html
new file mode 100644
index 0000000000..198afd969a
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Overview</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/sandbox.config.json b/samples/layouts/tile-manager/layout/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/src/index.css b/samples/layouts/tile-manager/layout/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/src/index.tsx b/samples/layouts/tile-manager/layout/src/index.tsx
new file mode 100644
index 0000000000..fe8228b71d
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/src/index.tsx
@@ -0,0 +1,67 @@
+import React, { Component, createRef } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import { IgrTileManager, IgrTile, IgrButton } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+export default class Layout extends Component<any, any> {
+
+  private tileManagerRef = createRef<IgrTileManager>();
+  state = {
+    serializedData: '',
+  };
+  constructor(props: any) {
+    super(props);
+  }
+
+  private onAddTileClick = () => {
+    const newTile = document.createElement("igc-tile");  
+    const contentHeader = document.createElement('span');
+    const content = document.createElement('p');
+    const index = this.tileManagerRef.current.tiles.length + 1;
+    contentHeader.textContent = `Tile ${index} header`;
+    content.textContent = `Content for Tile ${index}`;
+    contentHeader.setAttribute('slot', 'title');
+    newTile.position = 0;
+    newTile.append(contentHeader);
+    newTile.append(content);
+    (this.tileManagerRef.current as IgrTileManager).appendChild(newTile);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <div className="btnWrapper">
+          <IgrButton id="saveL" onClick={() => this.setState({ serializedData: this.tileManagerRef?.current.saveLayout()})}>Save Layout</IgrButton>
+          <IgrButton id="loadL" onClick={() => this.tileManagerRef.current.loadLayout(this.state.serializedData)}>Load Layout</IgrButton>
+          <IgrButton id="addT" onClick={this.onAddTileClick}>Add Tile</IgrButton>
+          <IgrButton id="remT" onClick={()=> this.tileManagerRef.current.querySelector('igc-tile:first-of-type')?.remove()}>Remove Tile</IgrButton>
+        </div>
+        <IgrTileManager ref={this.tileManagerRef} resize-mode="always" drag-mode="tile" column-count="2" gap="20px">
+          <IgrTile>
+            <span slot="title">Tile 1 header</span>
+            <p>Content for Tile 1</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 2 header</span>
+            <p>Content for Tile 2</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 3 header</span>
+            <p>Content for Tile 3</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 4 header</span>
+            <p>Content for Tile 4</p>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Layout/>);
diff --git a/samples/layouts/tile-manager/layout/src/layout.css b/samples/layouts/tile-manager/layout/src/layout.css
new file mode 100644
index 0000000000..b6a48ad93a
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/src/layout.css
@@ -0,0 +1,21 @@
+span{
+  font-size: 30px;
+}
+
+p {
+  font-size: 18px;
+  margin-left: 20px;
+}
+
+.btnWrapper {
+  margin: 0 0 8px 22px;
+}
+
+igc-button:nth-of-type(-n+3) {
+  margin-right: 5px;;
+}
+
+.sample {
+  overflow: auto;
+}
+ 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/src/react-app-env.d.ts b/samples/layouts/tile-manager/layout/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/layout/tsconfig.json b/samples/layouts/tile-manager/layout/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/tile-manager/overview/.eslintrc.js b/samples/layouts/tile-manager/overview/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/README.md b/samples/layouts/tile-manager/overview/README.md
new file mode 100644
index 0000000000..97cf75ffcc
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/overview/package.json b/samples/layouts/tile-manager/overview/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/overview/public/index.html b/samples/layouts/tile-manager/overview/public/index.html
new file mode 100644
index 0000000000..198afd969a
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Overview</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/sandbox.config.json b/samples/layouts/tile-manager/overview/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/src/index.css b/samples/layouts/tile-manager/overview/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/src/index.tsx b/samples/layouts/tile-manager/overview/src/index.tsx
new file mode 100644
index 0000000000..a132a03d10
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/src/index.tsx
@@ -0,0 +1,191 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import { IgrCard, IgrCardHeader, IgrCardContent, IgrTileManager, IgrTile, IgrIcon, IgrList, IgrListItem, IgrAvatar, registerIconFromText } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+const home = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
+const search = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
+const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
+registerIconFromText("home", home, "material");
+registerIconFromText("search", search, "material");
+registerIconFromText("favorite", favorite, "material");
+
+export default class Overview extends React.Component<any, any> {
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <IgrTileManager id="tile-manager1" columnCount={3} gap="20px" resizeMode="always" dragMode="tile-header">
+          <IgrTile rowSpan={3}>
+            <h3 slot="title">Order info</h3>
+            <IgrList className="list">
+              <IgrListItem>
+                <IgrAvatar slot="start" shape="circle" className="avatar">
+                  <IgrIcon name="list" collection="material" className="material-icons"></IgrIcon>
+                </IgrAvatar>
+                <div slot="title" className="content">
+                  <p>OrderID</p>
+                  <p>10293</p>
+                </div>
+              </IgrListItem>
+              <IgrListItem>
+                <IgrAvatar slot="start" shape="circle" className="avatar">
+                  <IgrIcon name="list" collection="material" className="material-icons"></IgrIcon>
+                </IgrAvatar>
+                <div slot="title" className="content">
+                  <p>Customer Name</p>
+                  <p>Tortuga Restaurante</p>
+                </div>
+              </IgrListItem>
+              <IgrListItem>
+                <IgrAvatar slot="start" shape="circle" className="avatar">
+                  <IgrIcon name="calendar" collection="material" className="material-icons"></IgrIcon>
+                </IgrAvatar>
+                <div slot="title" className="content">
+                  <p>Order Date</p>
+                  <p>August 29, 1996</p>
+                </div>
+              </IgrListItem>
+              <IgrListItem>
+                <IgrAvatar slot="start" shape="circle" className="avatar">
+                <IgrIcon name="calendar" collection="material" className="material-icons"></IgrIcon>
+                </IgrAvatar>
+                <div slot="title" className="content">
+                  <p>Shipped Date</p>
+                  <p>September 11, 1996</p>
+                </div>
+              </IgrListItem>
+              <IgrListItem>
+                <IgrAvatar slot="start" shape="circle" className="avatar">
+                  <IgrIcon name="list" collection="material" className="material-icons"></IgrIcon>
+                </IgrAvatar>
+                <div slot="title" className="content">
+                  <p>Product Name</p>
+                  <p>Carnavon Tigers</p>
+                </div>
+              </IgrListItem>
+              <IgrListItem>
+                <IgrAvatar slot="start" shape="circle" className="avatar">
+                  <IgrIcon name="list" collection="material" className="material-icons"></IgrIcon>
+                </IgrAvatar>
+                <div slot="title" className="content">
+                  <p>Ship Country</p>
+                  <p>Mexico</p>
+                </div>
+              </IgrListItem>
+            </IgrList>
+          </IgrTile>
+          <IgrTile col-span="2" row-span="2">
+
+            <h3 slot="title">Order Line Items</h3>
+            <div className="group">
+              <IgrCard className="card">
+                <div className="group_1">
+                  <IgrCardHeader>
+                    <div slot="thumbnail">
+                      <IgrAvatar shape="circle">
+                        <IgrIcon name="product" collection="material" className="material-icons"></IgrIcon>
+                      </IgrAvatar>
+                    </div>
+                    <h3 slot="title">Carnavon Tigers</h3>
+                  </IgrCardHeader>
+                  <IgrCardContent className="column">
+                    <div className="body-content">
+                      <span>Quantity</span> <span>12</span>
+                    </div>
+                    <div className="body-content">
+                      <span>Unit Price</span> <span>$50</span>
+                    </div>
+                  </IgrCardContent>
+                </div>
+              </IgrCard>
+              <IgrCard className="card">
+                <div className="group_1">
+                  <IgrCardHeader>
+                    <div slot="thumbnail">
+                      <IgrAvatar shape="circle">
+                        <IgrIcon name="product" collection="material" className="material-icons"></IgrIcon>
+                      </IgrAvatar>
+                    </div>
+                    <h3 slot="title">Guarana Fantastica</h3>
+                  </IgrCardHeader>
+                  <IgrCardContent className="column">
+                    <div className="body-content">
+                      <span>Quantity</span> <span>10</span>
+                    </div>
+                    <div className="body-content">
+                      <span>Unit Price</span> <span>$4</span>
+                    </div>
+                  </IgrCardContent>
+                </div>
+              </IgrCard>
+              <IgrCard className="card">
+                <div className="group_1">
+                  <IgrCardHeader>
+                    <div slot="thumbnail">
+                      <IgrAvatar shape="circle">
+                        <IgrIcon name="product" collection="material" className="material-icons"></IgrIcon>
+                      </IgrAvatar>
+                    </div>
+                    <h3 slot="title">Vegie-spread</h3>
+                  </IgrCardHeader>
+                  <IgrCardContent className="column">
+                    <div className="body-content">
+                      <span>Quantity</span> <span>5</span>
+                    </div>
+                    <div className="body-content">
+                      <span>Unit Price</span> <span>$35</span>
+                    </div>
+                  </IgrCardContent>
+                </div>
+              </IgrCard>
+              <IgrCard className="card">
+                <div className="group_1">
+                  <IgrCardHeader>
+                    <div slot="thumbnail">
+                      <IgrAvatar shape="circle">
+                        <IgrIcon name="product" collection="material" className="material-icons"></IgrIcon>
+                      </IgrAvatar>
+                    </div>
+                    <h3 slot="title">Rhonbrau Klosterbier</h3>
+                  </IgrCardHeader>
+                  <IgrCardContent className="column">
+                    <div className="body-content">
+                      <span>Quantity</span> <span>7</span>
+                    </div>
+                    <div className="body-content">
+                      <span>Unit Price</span> <span>$6</span>
+                    </div>
+                  </IgrCardContent>
+                </div>
+              </IgrCard>
+            </div>
+          </IgrTile>
+          <IgrTile >
+            <h3 slot="title">Order Value</h3>
+            <div className="string">
+              <h1>$8.66K</h1>
+            </div>
+          </IgrTile>
+          <IgrTile >
+            <h3 slot="title">Item quantity</h3>
+            <div className="string">
+              <h1>4</h1>
+            </div>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Overview/>);
diff --git a/samples/layouts/tile-manager/overview/src/layout.css b/samples/layouts/tile-manager/overview/src/layout.css
new file mode 100644
index 0000000000..b8d4ee12dc
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/src/layout.css
@@ -0,0 +1,39 @@
+igc-tile-manager {
+  margin-bottom: 5px;
+}
+
+.group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 15px;
+
+}
+
+.card {
+  min-height: 30px;
+  width: calc(50% - 30px);
+  margin: 0 15px 15px 15px
+}
+
+igc-card-content {
+  color: var(--content-text-color);
+}
+
+.body-content {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.string {
+  text-align: center;
+  margin-top: 50px;
+  color: var(--ig-gray-800);
+}
+ 
+.sample {
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/src/react-app-env.d.ts b/samples/layouts/tile-manager/overview/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/overview/tsconfig.json b/samples/layouts/tile-manager/overview/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/tile-manager/resize/.eslintrc.js b/samples/layouts/tile-manager/resize/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/README.md b/samples/layouts/tile-manager/resize/README.md
new file mode 100644
index 0000000000..305a3b82bb
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of resizing feature using [TileManager](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/resize" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/resize?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/resize
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/resize/package.json b/samples/layouts/tile-manager/resize/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/resize/public/index.html b/samples/layouts/tile-manager/resize/public/index.html
new file mode 100644
index 0000000000..85f4b19e1f
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Resize</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/sandbox.config.json b/samples/layouts/tile-manager/resize/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/src/index.css b/samples/layouts/tile-manager/resize/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/src/index.tsx b/samples/layouts/tile-manager/resize/src/index.tsx
new file mode 100644
index 0000000000..a9f9424c2a
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/src/index.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import { IgrTileManager, IgrTile, IgrRadio, IgrRadioGroup, IgrInput } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import { IgcRadioChangeEventArgs } from "igniteui-webcomponents/components/radio/radio";
+
+export default class Actions extends React.Component<any, any> {
+
+  private tileManagerRef = React.createRef<IgrTileManager>();
+  constructor(props: any) {
+    super(props);
+  }
+
+  private onRadioChange = (event: CustomEvent<IgcRadioChangeEventArgs>) => {
+      const radio = event.target as IgrRadio;
+      (this.tileManagerRef.current as IgrTileManager).resizeMode = radio.value as any;
+  };
+
+  private onInputChange = (event: CustomEvent) => {
+    const tileManager = this.tileManagerRef.current;
+    const input = event.target as IgrInput;
+    switch (input.label) {
+      case 'Minimum Column Width': tileManager.minColumnWidth = input.value;
+        break;
+      case 'Minimum Row Height': tileManager.minRowHeight = input.value;
+        break;
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <div className="inputWrapper">
+          <IgrRadioGroup id="resize" alignment="horizontal" onChange={this.onRadioChange}>
+            <IgrRadio name="resize" value="always" checked>Always</IgrRadio>
+            <IgrRadio name="resize" value="hover">Hover</IgrRadio>
+            <IgrRadio name="resize" value="none">None</IgrRadio>
+          </IgrRadioGroup>
+          <IgrInput label="Minimum Column Width" placeholder="200px" type={"text"} onChange={this.onInputChange}></IgrInput>
+          <IgrInput label="Minimum Row Height" placeholder="200px" type={"text"} onChange={this.onInputChange}></IgrInput>
+        </div>
+        <IgrTileManager resize-mode="always" gap="20px" ref={this.tileManagerRef}>
+          <IgrTile>
+            <span slot="title">Tile 1 header</span>
+            <p>Content for Tile 1</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 2 header</span>
+            <p>Content for Tile 2</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 3 header</span>
+            <p>Content for Tile 3</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 4 header</span>
+            <p>Content for Tile 4</p>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Actions/>);
diff --git a/samples/layouts/tile-manager/resize/src/layout.css b/samples/layouts/tile-manager/resize/src/layout.css
new file mode 100644
index 0000000000..b3827fe872
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/src/layout.css
@@ -0,0 +1,32 @@
+span{
+  font-size: 30px;
+}
+
+p {
+  font-size: 18px;
+  padding-left: 20px;
+}
+
+igc-radio-group {
+  margin: 0 50px 0 22px;
+  width: fit-content;
+  padding: 4px 15px;
+  border: 2px solid var(--ig-primary-700);
+  background-color: var(--ig-gray-300);
+  align-self: end;
+}
+
+.sample {
+  overflow: auto;
+}
+
+.inputWrapper{
+  display: flex;
+  margin-bottom: 12px;
+}
+
+igc-input {
+  width: min-content;
+  --ig-size: var(--ig-size-small);
+  margin-right: 50px;
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/src/react-app-env.d.ts b/samples/layouts/tile-manager/resize/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/resize/tsconfig.json b/samples/layouts/tile-manager/resize/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/tile-manager/styling/.eslintrc.js b/samples/layouts/tile-manager/styling/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/README.md b/samples/layouts/tile-manager/styling/README.md
new file mode 100644
index 0000000000..e8882ad253
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of styling feature using [TileManager](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/tile-manager/styling" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/tile-manager/styling?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/tile-manager/styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/styling/package.json b/samples/layouts/tile-manager/styling/package.json
new file mode 100644
index 0000000000..f9a29d4a37
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-radio-group",
+  "description": "This project provides example of Radio Group using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.3",
+    "igniteui-react-core": "19.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/tile-manager/styling/public/index.html b/samples/layouts/tile-manager/styling/public/index.html
new file mode 100644
index 0000000000..5e6ded937d
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tile Manager Styling</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/sandbox.config.json b/samples/layouts/tile-manager/styling/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/src/index.css b/samples/layouts/tile-manager/styling/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/src/index.tsx b/samples/layouts/tile-manager/styling/src/index.tsx
new file mode 100644
index 0000000000..2af3f5b063
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/src/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./layout.css";
+import "./styles.css";
+import { IgrTileManager, IgrTile, IgrIcon, registerIconFromText } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+export default class Styling extends React.Component<any, any> {
+
+  constructor(props: any) {
+    super(props);
+    const indicatorIcon =
+      '<svg xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M3.993 12.508V.765h-.979v11.743h.979ZM1.54 10.06V3.21H.56v6.85h.98Z" fill="#09F"/></svg>';
+
+    registerIconFromText('indicator', indicatorIcon);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample center">
+        <IgrTileManager column-count="2" gap="20px" resize-mode="always">
+          <IgrTile>
+            <IgrIcon slot="side-adorner" className="side" name="indicator"></IgrIcon>
+            <IgrIcon slot="corner-adorner" className="corner" name="indicator"></IgrIcon>
+            <IgrIcon slot="bottom-adorner" className="bottom" name="indicator"></IgrIcon>
+            <span slot="title">Tile 1 header</span>
+            <p>Content for Tile 1</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 2 header</span>
+            <p>Content for Tile 2</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 3 header</span>
+            <p>Content for Tile 3</p>
+          </IgrTile>
+          <IgrTile>
+            <span slot="title">Tile 4 header</span>
+            <p>Content for Tile 4</p>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    );
+  }
+
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Styling/>);
diff --git a/samples/layouts/tile-manager/styling/src/layout.css b/samples/layouts/tile-manager/styling/src/layout.css
new file mode 100644
index 0000000000..caa19110d4
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/src/layout.css
@@ -0,0 +1,12 @@
+span{
+  font-size: 30px;
+}
+
+p {
+  font-size: 18px;
+  margin: 10px 0 0 20px;
+}
+ 
+.sample {
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/src/react-app-env.d.ts b/samples/layouts/tile-manager/styling/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/layouts/tile-manager/styling/src/styles.css b/samples/layouts/tile-manager/styling/src/styles.css
new file mode 100644
index 0000000000..81c7f7508c
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/src/styles.css
@@ -0,0 +1,41 @@
+igc-tile-manager::part(base) {
+  background-color: var(--ig-surface-900);
+}
+
+igc-tile::part(content-container) {
+  color: var(--ig-secondary-200);
+}
+
+igc-tile::part(header) {
+  background-color: var(--ig-gray-300);
+}
+
+igc-tile::part(title) {
+  color: var(--ig-primary-400);
+}
+
+igc-tile:nth-child(n+2)::part(trigger-side), igc-tile:nth-child(n+2)::part(trigger-bottom) {
+  background-color: var(--ig-success-500);
+}
+
+igc-tile:nth-child(n+2)::part(trigger) {
+  background-color: var(--ig-error-500);
+}
+ 
+.side,
+.corner,
+.bottom {
+  display: inline;
+  width: 100%;
+  height: 100%;
+}
+
+.corner {
+  transform: rotate(220deg);
+  bottom: 8px;
+  right: 8px;
+}
+
+.bottom {
+  transform: rotate(90deg);
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/tsconfig.json b/samples/layouts/tile-manager/styling/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}