diff --git a/browser/public/index.html b/browser/public/index.html
index 6c29cd72d..00e4afc0e 100644
--- a/browser/public/index.html
+++ b/browser/public/index.html
@@ -519,6 +519,7 @@
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/data-validator-service">─<span>Data Validator Service</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/data-validator-service-cross-field">─<span>Data Validator Service Cross Field</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/data-validator-service-extended">─<span>Data Validator Service Extended</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/grids/grid/disabled-summaries">─<span>Disabled Summaries</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-columns">─<span>Editing Columns</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-events">─<span>Editing Events</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid/editing-excel-style">─<span>Editing Excel Style</span></a> 
@@ -621,6 +622,7 @@
            <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/data-summary-options">─<span>Data Summary Options</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/data-summary-options-styling">─<span>Data Summary Options Styling</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/data-summary-template">─<span>Data Summary Template</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/disabled-summaries">─<span>Disabled Summaries</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/editing-columns">─<span>Editing Columns</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/editing-events">─<span>Editing Events</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/editing-lifecycle">─<span>Editing Lifecycle</span></a> 
@@ -729,6 +731,7 @@
            <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/data-summary-options">─<span>Data Summary Options</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/data-summary-options-styling">─<span>Data Summary Options Styling</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/data-summary-template">─<span>Data Summary Template</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/disabled-summaries">─<span>Disabled Summaries</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/editing-columns">─<span>Editing Columns</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/editing-events">─<span>Editing Events</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/tree-grid/editing-lifecycle">─<span>Editing Lifecycle</span></a> 
@@ -1024,6 +1027,16 @@
            <a class="nav-link" href="#" data-nav="/samples/layouts/tabs/prefix-suffix">─<span>Prefix Suffix</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/layouts/tabs/scrolling">─<span>Scrolling</span></a> 
        </div>
+       <label id="nav-tile-manager" class="nav-component">Tile Manager</label> 
+       <div id="nav-tile-manager-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/actions">─<span>Actions</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/columngap">─<span>Columngap</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/dragndrop">─<span>Dragndrop</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/layout">─<span>Layout</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/overview">─<span>Overview</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/resize">─<span>Resize</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/layouts/tile-manager/styling">─<span>Styling</span></a> 
+       </div>
 
        <div class="nav-group">MAPS</div> 
        <label id="nav-geographic-map" class="nav-component">Geographic Map</label> 
diff --git a/package-lock.json b/package-lock.json
index 019407187..10983c8a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "core-js": "^3.6.5",
         "file-saver": "^2.0.2",
         "igniteui-dockmanager": "1.16.0",
-        "igniteui-webcomponents": "5.2.4",
+        "igniteui-webcomponents": "5.3.0",
         "igniteui-webcomponents-charts": "5.3.0",
         "igniteui-webcomponents-core": "5.3.0",
         "igniteui-webcomponents-dashboards": "5.3.0",
@@ -8727,9 +8727,9 @@
       "integrity": "sha512-q6thtu+7R6MOB+i9GorFPCcWeOImW43BzCAtKnDAYWwaoueb8Lg1EhBkIhAyfEIH+yZ/9c5lnZdU61/GRPoP+g=="
     },
     "node_modules/igniteui-webcomponents": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.2.4.tgz",
-      "integrity": "sha512-EppDLSA0wGX6CFweeF4IVtAjMzcVw6TFDMXVKQQNwXTuSkmWLTGFgwGB7Aj/wryPz8D4bbGe8hF7Mv7sA4xI9w==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.3.0.tgz",
+      "integrity": "sha512-K5PPwfT2ECp/W3+mNapt1HW6PRIQK7DkehK4SbsCc513LwTzBL1gfHYax0Hk3eiPJP2M/8ANBJ3yDZdRy6YzXQ==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@floating-ui/dom": "^1.6.0",
diff --git a/package.json b/package.json
index 6e0126138..ff4f97f3c 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "core-js": "^3.6.5",
     "file-saver": "^2.0.2",
     "igniteui-dockmanager": "1.16.0",
-    "igniteui-webcomponents": "5.2.4",
+    "igniteui-webcomponents": "5.3.0",
     "igniteui-webcomponents-charts": "5.3.0",
     "igniteui-webcomponents-core": "5.3.0",
     "igniteui-webcomponents-dashboards": "5.3.0",
diff --git a/samples/grids/pivot-grid/state-persistence-main/src/index.ts b/samples/grids/pivot-grid/state-persistence-main/src/index.ts
index 55ce5ec33..48e18dc27 100644
--- a/samples/grids/pivot-grid/state-persistence-main/src/index.ts
+++ b/samples/grids/pivot-grid/state-persistence-main/src/index.ts
@@ -21,7 +21,7 @@ export class Sample {
 
     public options: IgcGridStateOptions = {
         cellSelection: true,
-        rowSelection: true,
+        columnSelection: true,
         filtering: true,
         sorting: true,
         expansion: true,
@@ -245,13 +245,14 @@ export class Sample {
         if (action === 'allFeatures') {
             var allCheckboxes = Array.from(document.getElementsByTagName("igc-checkbox"));
             allCheckboxes.forEach(cb => {
-                cb.checked = event.detail;
+                cb.checked = event.detail.checked;
             });
+
             for (const key of Object.keys(this.options)) {
-                (this.gridState.options as any)[key] = event.detail;
-            }
+                (this.gridState.options as any)[key] = event.detail.checked;
+            }        
         } else {
-            (this.gridState.options as any)[action] = event.detail;
+            (this.gridState.options as any)[action] = event.detail.checked;
             var allFeatures = document.getElementById("allFeatures") as IgcCheckboxComponent;
             allFeatures.checked = Object.keys(this.options).every(o => (this.gridState.options as any)[o]);
         }
diff --git a/samples/layouts/tile-manager/actions/.prettierrc b/samples/layouts/tile-manager/actions/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..ba48172e5
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Actions feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/actions?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/actions
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/actions/index.html b/samples/layouts/tile-manager/actions/index.html
new file mode 100644
index 000000000..c6770f247
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Actions</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <igc-tile-manager id="tile-manager1" column-count="2" gap="20px">
+        <igc-tile >
+          <h3 slot="title">Default Actions</h3>
+          <p>This tile has default actions and title.</p>
+        </igc-tile>
+        <igc-tile disable-fullscreen>
+          <h3 slot="title">No Fullscreen Action</h3>
+          <p>Fullscreen is disabled via property.</p>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <h3 slot="title">Custom Actions</h3>
+          <igc-icon-button id="customOne" slot="actions" variant="flat" collection="material" exportparts="icon" name="north_east"
+            aria-label="north_east"></igc-icon-button>
+          <p>Replace the default actions with custom ones, and include extra actions when the tile is maximized.</p>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <igc-icon-button id="customTwo" slot="actions" variant="flat" collection="material" exportparts="icon"
+            name="north_east"></igc-icon-button>
+          <p>Display only custom actions in the header.</p>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <h3 slot="title">Only title</h3>
+          <p>Display only title in the header.</p>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <p>Content only.</p>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/package.json b/samples/layouts/tile-manager/actions/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/actions/src/index.ts
new file mode 100644
index 000000000..4e77a222d
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/src/index.ts
@@ -0,0 +1,95 @@
+import { defineComponents, IgcTileManagerComponent, IgcIconButtonComponent, IgcIconComponent, IgcButtonComponent, registerIconFromText } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+
+defineComponents(IgcTileManagerComponent, IgcIconButtonComponent, IgcIconComponent, IgcButtonComponent);
+
+export class TileManagerActions {
+
+  constructor() {
+    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');
+
+    document.querySelector('#customOne')?.addEventListener('click', (event: Event) => {
+
+      const tile = (event.target as HTMLElement).closest('igc-tile');
+
+      if (tile) {
+        tile.maximized = !tile.maximized;
+
+        const actionsSlot = tile.querySelector('[slot="actions"]') as HTMLElement;
+        const currentBtn = event.target 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());
+          }
+        }
+      }
+    })
+
+
+
+    document.querySelector('#customTwo')?.addEventListener('click', (event: Event) => {
+      const tile = (event.target as HTMLElement).closest('igc-tile');
+
+      if (tile) {
+        tile.maximized = !tile.maximized;
+
+        const currentBtn = event.target 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');
+          }
+        }
+      }
+    })
+
+    
+  }
+}
+
+new TileManagerActions();
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 000000000..eaaa9e641
--- /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/tsconfig.json b/samples/layouts/tile-manager/actions/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/webpack.config.js b/samples/layouts/tile-manager/actions/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/tile-manager/columngap/.prettierrc b/samples/layouts/tile-manager/columngap/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..4cd52c544
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Columngap feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/columngap?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/columngap
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/columngap/index.html b/samples/layouts/tile-manager/columngap/index.html
new file mode 100644
index 000000000..d2e03eb9b
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Columns</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <div class="inputWrapper">
+      <igc-input label="Columns Number" id="rowIn" type='number' value="0" min="0"></igc-input>
+      <igc-input label="Gap Size" type='string' placeholder="10px"></igc-input>
+    </div>
+      <igc-tile-manager gap="10px">
+        <igc-tile disable-fullscreen disable-maximize>
+          <div class="picture">
+            <img src="https://picsum.photos/1048/998" alt="picture" />
+          </div>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <div class="picture">
+            <img src="https://picsum.photos/1049/999" alt="picture" />
+          </div>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <div class="picture">
+            <img src="https://picsum.photos/1050/1000" alt="picture" />
+          </div>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <div class="picture">
+            <img src="https://picsum.photos/1051/1001" alt="picture" />
+          </div>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <div class="picture">
+            <img src="https://picsum.photos/1052/1002" alt="picture" />
+          </div>
+        </igc-tile>
+        <igc-tile disable-fullscreen disable-maximize>
+          <div class="picture">
+            <img src="https://picsum.photos/1053/1003" alt="picture" />
+          </div>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/package.json b/samples/layouts/tile-manager/columngap/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/columngap/src/index.ts
new file mode 100644
index 000000000..d4c05a522
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/src/index.ts
@@ -0,0 +1,25 @@
+import { defineComponents, IgcTileManagerComponent, IgcInputComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+
+defineComponents(IgcTileManagerComponent, IgcInputComponent);
+
+export class TileManagerColumn {
+
+  constructor() {
+    const tileManager = document.querySelector("igc-tile-manager");
+    document.addEventListener('igcChange', (e) => {
+      const fieldInput = e.target as IgcInputComponent;
+      if (tileManager) {
+        switch (fieldInput.label) {
+          case 'Columns Number': tileManager.columnCount = parseInt(fieldInput.value);
+            break;
+          case 'Gap Size': tileManager.gap = fieldInput.value;
+            break;
+        }
+      }
+    })
+  }
+}
+
+new TileManagerColumn();
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 000000000..274995b96
--- /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/tsconfig.json b/samples/layouts/tile-manager/columngap/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/webpack.config.js b/samples/layouts/tile-manager/columngap/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/tile-manager/dragndrop/.prettierrc b/samples/layouts/tile-manager/dragndrop/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..eab96335a
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Dragndrop feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/dragndrop?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/dragndrop
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/dragndrop/index.html b/samples/layouts/tile-manager/dragndrop/index.html
new file mode 100644
index 000000000..1eb272885
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Drag and drop</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <div class="radioWrapper">
+      <igc-radio-group id="dragMode" alignment="horizontal">
+        <igc-radio name="dragMode" value="TileHeader" checked>Tile-header</igc-radio>
+        <igc-radio name="dragMode" value="Tile">Tile</igc-radio>
+        <igc-radio name="dragMode" value="None">None</igc-radio>
+      </igc-radio-group>
+    </div>
+      <igc-tile-manager drag-mode="tile-header" drag-action="slide" column-count="2" gap="20px">
+        <igc-tile>
+         <span slot="title">Tile 1 header</span>
+          <p>Content for Tile 1</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 2 header</span>
+          <p>Content for Tile 2</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 3 header</span>
+          <p>Content for Tile 3</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 4 header</span>
+          <p>Content for Tile 4</p>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/package.json b/samples/layouts/tile-manager/dragndrop/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/dragndrop/src/index.ts
new file mode 100644
index 000000000..5ce50e0cf
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/src/index.ts
@@ -0,0 +1,23 @@
+import { defineComponents, IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+
+defineComponents(IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent);
+
+export class TileManagerDragnDrop {
+  constructor() {
+    document.addEventListener('igcChange', (e) => {
+      const radio = e.target as IgcRadioComponent;
+      switch (radio.value) {
+        case 'TileHeader': document.querySelector("igc-tile-manager")?.setAttribute("drag-mode", "tile-header");
+          break;
+        case 'Tile': document.querySelector("igc-tile-manager")?.setAttribute("drag-mode", "tile");
+          break;
+        case 'None': document.querySelector("igc-tile-manager")?.setAttribute("drag-mode", "none");
+          break;
+      }
+    })
+  }
+}
+
+new TileManagerDragnDrop();
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 000000000..27df917d7
--- /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/tsconfig.json b/samples/layouts/tile-manager/dragndrop/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/webpack.config.js b/samples/layouts/tile-manager/dragndrop/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/tile-manager/layout/.prettierrc b/samples/layouts/tile-manager/layout/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..c4728769a
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Layout feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/layout?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/layout
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/layout/index.html b/samples/layouts/tile-manager/layout/index.html
new file mode 100644
index 000000000..6bb5cf018
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Layout</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <div class="btnWrapper">
+      <igc-button id="saveL">Save Layout</igc-button>
+      <igc-button id="loadL">Load Layout</igc-button>
+      <igc-button id="addT">Add Tile</igc-button>
+      <igc-button id="remT">Remove Tile</igc-button>
+      </div>
+      <igc-tile-manager resize-mode="always" id="tile-manager1" drag-mode="tile" column-count="2" gap="20px">
+        <igc-tile>
+          <span slot="title">Tile 1 header</span>
+          <p>Content for Tile 1</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 2 header</span>
+          <p>Content for Tile 2</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 3 header</span>
+          <p>Content for Tile 3</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 4 header</span>
+          <p>Content for Tile 4</p>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/package.json b/samples/layouts/tile-manager/layout/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/layout/src/index.ts
new file mode 100644
index 000000000..c87278a4c
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/src/index.ts
@@ -0,0 +1,53 @@
+import { defineComponents, IgcTileManagerComponent, IgcButtonComponent, IgcButtonGroupComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+
+defineComponents(IgcTileManagerComponent, IgcButtonComponent, IgcButtonGroupComponent);
+
+export class TileManagerLayout {
+
+  constructor() {
+    let serializedData: string;
+    let index = 4;
+    var tileManager = document.querySelector<IgcTileManagerComponent>('#tile-manager1')!;
+
+    document.querySelector('#saveL')?.addEventListener('click', () => {
+      const tileManager =
+        document.querySelector<IgcTileManagerComponent>('#tile-manager1')!;
+
+      serializedData = tileManager.saveLayout();
+    })
+
+    document.querySelector('#loadL')?.addEventListener('click', () => {
+      const tileManager =
+        document.querySelector<IgcTileManagerComponent>('#tile-manager1')!;
+
+      tileManager.loadLayout(serializedData);
+    })
+
+    document.querySelector('#addT')?.addEventListener('click', () => {
+      const tiles = tileManager.querySelectorAll('igc-tile');
+      const newTile = document.createElement('igc-tile');
+      const contentHeader = document.createElement('span');
+      const content = document.createElement('p');
+      index++;
+      contentHeader.textContent = `Tile ${index} header`;
+      content.textContent = `Content for Tile ${index}`;
+      contentHeader.setAttribute('slot', 'title');
+      newTile.position = 0;
+      newTile.append(contentHeader);
+      newTile.append(content);
+      tileManager.insertBefore(newTile, tiles[3]);
+    })
+
+    document.querySelector('#remT')?.addEventListener('click', () => {
+      const firstTile = tileManager.querySelector('igc-tile:first-of-type');
+
+      if (firstTile) {
+        firstTile.remove();
+      }
+    })
+  }
+}
+
+new TileManagerLayout();
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 000000000..b6a48ad93
--- /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/tsconfig.json b/samples/layouts/tile-manager/layout/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/webpack.config.js b/samples/layouts/tile-manager/layout/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/tile-manager/overview/.prettierrc b/samples/layouts/tile-manager/overview/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..c5376311d
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Overview feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/overview/index.html b/samples/layouts/tile-manager/overview/index.html
new file mode 100644
index 000000000..e3e081e23
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/index.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Overview</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <igc-tile-manager id="tile-manager1" column-count="3" gap="20px" resize-mode="always" drag-mode="'tile-header">
+
+        <igc-tile row-span="3">
+
+          <h3 slot="title">Order info</h3>
+          <igc-list class="list">
+            <igc-list-item>
+              <igc-avatar slot="start" shape="circle" class="avatar">
+                <igc-icon name="list" collection="material" class="material-icons"></igc-icon>
+              </igc-avatar>
+              <div slot="title" class="content">
+                <p>OrderID</p>
+                <p>10293</p>
+              </div>
+            </igc-list-item>
+            <igc-list-item>
+              <igc-avatar slot="start" shape="circle" class="avatar">
+                <igc-icon name="list" collection="material" class="material-icons"></igc-icon>
+              </igc-avatar>
+              <div slot="title" class="content">
+                <p>Customer Name</p>
+                <p>Tortuga Restaurante</p>
+              </div>
+            </igc-list-item>
+            <igc-list-item>
+              <igc-avatar slot="start" shape="circle" class="avatar">
+                <igc-icon name="calendar" collection="material" class="material-icons"></igc-icon>
+              </igc-avatar>
+              <div slot="title" class="content">
+                <p>Order Date</p>
+                <p>August 29, 1996</p>
+              </div>
+            </igc-list-item>
+            <igc-list-item>
+              <igc-avatar slot="start" shape="circle" class="avatar">
+              <igc-icon name="calendar" collection="material" class="material-icons"></igc-icon>
+              </igc-avatar>
+              <div slot="title" class="content">
+                <p>Shipped Date</p>
+                <p>September 11, 1996</p>
+              </div>
+            </igc-list-item>
+            <igc-list-item>
+              <igc-avatar slot="start" shape="circle" class="avatar">
+                <igc-icon name="list" collection="material" class="material-icons"></igc-icon>
+              </igc-avatar>
+              <div slot="title" class="content">
+                <p>Product Name</p>
+                <p>Carnavon Tigers</p>
+              </div>
+            </igc-list-item>
+            <igc-list-item>
+              <igc-avatar slot="start" shape="circle" class="avatar">
+                <igc-icon name="list" collection="material" class="material-icons"></igc-icon>
+              </igc-avatar>
+              <div slot="title" class="content">
+                <p>Ship Country</p>
+                <p>Mexico</p>
+              </div>
+            </igc-list-item>
+          </igc-list>
+        </igc-tile>
+        <igc-tile col-span="2" row-span="2">
+
+          <h3 slot="title">Order Line Items</h3>
+          <div class="group">
+            <igc-card class="card">
+              <div class="group_1">
+                <igc-card-header>
+                  <div slot="thumbnail">
+                    <igc-avatar shape="circle">
+                      <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
+                    </igc-avatar>
+                  </div>
+                  <h3 slot="title">Carnavon Tigers</h3>
+                </igc-card-header>
+                <igc-card-content class="column">
+                  <div class="body-content">
+                    <span>Quantity</span> <span>12</span>
+                  </div>
+                  <div class="body-content">
+                    <span>Unit Price</span> <span>$50</span>
+                  </div>
+                </igc-card-content>
+              </div>
+            </igc-card>
+            <igc-card class="card">
+              <div class="group_1">
+                <igc-card-header>
+                  <div slot="thumbnail">
+                    <igc-avatar shape="circle">
+                      <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
+                    </igc-avatar>
+                  </div>
+                  <h3 slot="title">Guarana Fantastica</h3>
+                </igc-card-header>
+                <igc-card-content class="column">
+                  <div class="body-content">
+                    <span>Quantity</span> <span>10</span>
+                  </div>
+                  <div class="body-content">
+                    <span>Unit Price</span> <span>$4</span>
+                  </div>
+                </igc-card-content>
+              </div>
+            </igc-card>
+            <igc-card class="card">
+              <div class="group_1">
+                <igc-card-header>
+                  <div slot="thumbnail">
+                    <igc-avatar shape="circle">
+                      <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
+                    </igc-avatar>
+                  </div>
+                  <h3 slot="title">Vegie-spread</h3>
+                </igc-card-header>
+                <igc-card-content class="column">
+                  <div class="body-content">
+                    <span>Quantity</span> <span>5</span>
+                  </div>
+                  <div class="body-content">
+                    <span>Unit Price</span> <span>$35</span>
+                  </div>
+                </igc-card-content>
+              </div>
+            </igc-card>
+            <igc-card class="card">
+              <div class="group_1">
+                <igc-card-header>
+                  <div slot="thumbnail">
+                    <igc-avatar shape="circle">
+                      <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
+                    </igc-avatar>
+                  </div>
+                  <h3 slot="title">Rhonbrau Klosterbier</h3>
+                </igc-card-header>
+                <igc-card-content class="column">
+                  <div class="body-content">
+                    <span>Quantity</span> <span>7</span>
+                  </div>
+                  <div class="body-content">
+                    <span>Unit Price</span> <span>$6</span>
+                  </div>
+                </igc-card-content>
+              </div>
+            </igc-card>
+          </div>
+        </igc-tile>
+        <igc-tile >
+          <h3 slot="title">Order Value</h3>
+          <div class="string">
+            <h1>$8.66K</h1>
+          </div>
+        </igc-tile>
+        <igc-tile >
+          <h3 slot="title">Item quantity</h3>
+          <div class="string">
+            <h1>4</h1>
+          </div>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/package.json b/samples/layouts/tile-manager/overview/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/overview/src/index.ts
new file mode 100644
index 000000000..c0e0de72d
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/src/index.ts
@@ -0,0 +1,24 @@
+import { defineComponents, IgcAvatarComponent, IgcCardComponent, IgcListComponent, IgcTileManagerComponent, IgcIconComponent, registerIcon, registerIconFromText } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+
+defineComponents(IgcTileManagerComponent, IgcListComponent, IgcAvatarComponent, IgcCardComponent, IgcIconComponent);
+
+export class TileManagerOverview {
+  constructor() {
+    const listIcon =
+      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z"/></svg>';
+
+    const calendarIcon =
+      '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M19,20 H5V10h14V20z M9,14H7v-2h2V14z M13,14h-2v-2h2V14z M17,14h-2v-2h2V14z M9,18H7v-2h2V18z M13,18h-2v-2h2V18z M17,18h-2v-2h2V18z"/></svg>'
+
+    const productIcon =
+      '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M13,10h-2V8h2V10z M13,6h-2V1h2V6z M7,18c-1.1,0-1.99,0.9-1.99,2S5.9,22,7,22s2-0.9,2-2S8.1,18,7,18z M17,18 c-1.1,0-1.99,0.9-1.99,2s0.89,2,1.99,2s2-0.9,2-2S18.1,18,17,18z M8.1,13h7.45c0.75,0,1.41-0.41,1.75-1.03L21,4.96L19.25,4l-3.7,7 H8.53L4.27,2H1v2h2l3.6,7.59l-1.35,2.44C4.52,15.37,5.48,17,7,17h12v-2H7L8.1,13z"/></svg>'
+
+    registerIconFromText("list", listIcon, "material");
+    registerIconFromText("calendar", calendarIcon, "material");
+    registerIconFromText("product", productIcon, "material");
+  }
+}
+
+new TileManagerOverview();
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 000000000..b8d4ee12d
--- /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/tsconfig.json b/samples/layouts/tile-manager/overview/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/webpack.config.js b/samples/layouts/tile-manager/overview/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/tile-manager/resize/.prettierrc b/samples/layouts/tile-manager/resize/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..7f0aac25e
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Resize feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/resize?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/resize
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/resize/index.html b/samples/layouts/tile-manager/resize/index.html
new file mode 100644
index 000000000..6148b017e
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Resize</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <div class="inputWrapper">
+        <igc-radio-group id="resize" alignment="horizontal">
+          <igc-radio name="resize" value="Always" checked>Always</igc-radio>
+          <igc-radio name="resize" value="Hover">Hover</igc-radio>
+          <igc-radio name="resize" value="None">None</igc-radio>
+        </igc-radio-group>
+        <igc-input label="Minimum Column Width" placeholder="200px" type='string'></igc-input>
+        <igc-input label="Minimum Row Height" placeholder="200px" type='string'></igc-input>
+      </div>
+      <igc-tile-manager resize-mode="always" gap="20px">
+        <igc-tile>
+          <span slot="title">Tile 1 header</span>
+          <p>Content for Tile 1</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 2 header</span>
+          <p>Content for Tile 2</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 3 header</span>
+          <p>Content for Tile 3</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 4 header</span>
+          <p>Content for Tile 4</p>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/package.json b/samples/layouts/tile-manager/resize/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/resize/src/index.ts
new file mode 100644
index 000000000..e7dfcfd5e
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/src/index.ts
@@ -0,0 +1,34 @@
+import { defineComponents, IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent, IgcInputComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+
+defineComponents(IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent, IgcInputComponent);
+
+export class TileManagerResize {
+  constructor() {
+    const tileManager = document.querySelector("igc-tile-manager");
+    document.addEventListener('igcChange', (e) => {
+      const radio = e.target as IgcRadioComponent;
+      const fieldInput = e.target as IgcInputComponent;
+      if (tileManager) {
+        switch (radio.value) {
+          case 'Hover': tileManager.setAttribute("resize-mode", "hover");
+            break;
+          case 'Always': tileManager.setAttribute("resize-mode", "always");
+            break;
+          case 'None': tileManager.setAttribute("resize-mode", "none");
+            break;
+        }
+
+        switch (fieldInput.label) {
+          case 'Minimum Column Width': tileManager.minColumnWidth = fieldInput.value;;
+            break;
+          case 'Minimum Row Height': tileManager.minRowHeight = fieldInput.value;;
+            break;
+        }
+      }
+    })
+  }
+}
+
+new TileManagerResize();
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 000000000..b3827fe87
--- /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/tsconfig.json b/samples/layouts/tile-manager/resize/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/webpack.config.js b/samples/layouts/tile-manager/resize/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/tile-manager/styling/.prettierrc b/samples/layouts/tile-manager/styling/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ 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 000000000..eac523441
--- /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-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Styling feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/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.ts" 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/webcomponents-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-wc-examples/tree/master/samples/layouts/tile-manager/styling?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" 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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/tile-manager/styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/tile-manager/styling/index.html b/samples/layouts/tile-manager/styling/index.html
new file mode 100644
index 000000000..e0f2f72e1
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tile Manager Styling</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="container sample center">
+      <igc-tile-manager column-count="2" gap="20px" resize-mode="always">
+        <igc-tile>
+          <igc-icon slot="side-adorner" class="side" name="indicator"></igc-icon>
+          <igc-icon slot="corner-adorner" class="corner" name="indicator"></igc-icon>
+          <igc-icon slot="bottom-adorner" class="bottom" name="indicator"></igc-icon>
+          <span slot="title">Tile 1 header</span>
+          <p>Content for Tile 1</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 2 header</span>
+          <p>Content for Tile 2</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 3 header</span>
+          <p>Content for Tile 3</p>
+        </igc-tile>
+        <igc-tile>
+          <span slot="title">Tile 4 header</span>
+          <p>Content for Tile 4</p>
+        </igc-tile>
+      </igc-tile-manager>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/package.json b/samples/layouts/tile-manager/styling/package.json
new file mode 100644
index 000000000..a74d015e9
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-avatar-icon",
+  "version": "1.0.0",
+  "description": "This project provides example of Avatar Icon using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "5.3.0-RC.1",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
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 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
\ 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 000000000..0fe936871
--- /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.ts b/samples/layouts/tile-manager/styling/src/index.ts
new file mode 100644
index 000000000..cd61a295b
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/src/index.ts
@@ -0,0 +1,17 @@
+import { defineComponents, IgcTileManagerComponent, registerIconFromText } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+import './styles.css'
+
+defineComponents(IgcTileManagerComponent);
+
+export class TileManagerOverview {
+  constructor() {
+    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);
+  }
+}
+
+new TileManagerOverview();
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 000000000..caa19110d
--- /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/styles.css b/samples/layouts/tile-manager/styling/src/styles.css
new file mode 100644
index 000000000..81c7f7508
--- /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 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/webpack.config.js b/samples/layouts/tile-manager/styling/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};