diff --git a/samples/menus/nav-drawer/add-drawer-items/src/index.tsx b/samples/menus/nav-drawer/add-drawer-items/src/index.tsx
index 58b0148e1..7a1b72f21 100644
--- a/samples/menus/nav-drawer/add-drawer-items/src/index.tsx
+++ b/samples/menus/nav-drawer/add-drawer-items/src/index.tsx
@@ -1,14 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
-         IgrIconButton, IgrIconButtonModule, registerIconFromText } from 'igniteui-react';
+import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrNavDrawerModule.register();
-IgrIconModule.register();
-IgrIconButtonModule.register();
-
 const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
 const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
 const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
@@ -30,30 +25,30 @@ export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                  <IgrIconButton style={{margin: "10px"}}
-                        onClick={this.toggleDrawer}
-                        name="menu" 
-                        collection="material"
-                        variant="flat">
-                    </IgrIconButton>
+                <IgrIconButton style={{ margin: "10px" }}
+                    onClick={this.toggleDrawer}
+                    name="menu"
+                    collection="material"
+                    variant="flat">
+                </IgrIconButton>
                 <div onClick={this.onNavDrawerClick}>
                     <IgrNavDrawer open={true} ref={this.navDrawerRef}>
-                        <IgrNavDrawerHeaderItem key="header">
-                            <span key="sHeader">Sample Drawer</span>
+                        <IgrNavDrawerHeaderItem>
+                            <span>Sample Drawer</span>
                         </IgrNavDrawerHeaderItem>
 
-                        <IgrNavDrawerItem key="home">
-                            <div slot="icon" key="iHome">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="home" collection="material" />
                             </div>
-                            <span slot="content" key="sHome">Home</span>
+                            <span slot="content">Home</span>
                         </IgrNavDrawerItem>
 
-                        <IgrNavDrawerItem key="search">
-                            <div slot="icon" key="iSearch">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="search" collection="material" />
                             </div>
-                            <span slot="content" key="sSearch">Search</span>
+                            <span slot="content">Search</span>
                         </IgrNavDrawerItem>
                     </IgrNavDrawer>
                 </div>
@@ -61,7 +56,7 @@ export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
         );
     }
 
-    public navDrawerRef(navDrawer: IgrNavDrawer){
+    public navDrawerRef(navDrawer: IgrNavDrawer) {
         if (!navDrawer) { return; }
         this.navDrawer = navDrawer;
     }
@@ -74,20 +69,20 @@ export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
 
     public onNavDrawerClick(e: any) {
         const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
-                                (e.target.parentElement?.closest('igc-nav-drawer-item') ?? 
-                                null)
+            (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+                null)
 
         if (!drawerItem) { return; }
 
         drawerItem.active = true;
         const navDrawer = drawerItem.parentElement;
         Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
-             .filter((item: any) => item !== drawerItem)
-             .forEach((child: any) => child.active = false);
+            .filter((item: any) => item !== drawerItem)
+            .forEach((child: any) => child.active = false);
     }
 
 }
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<NavDrawerAddDrawerItems/>);
+root.render(<NavDrawerAddDrawerItems />);
diff --git a/samples/menus/nav-drawer/add-mini/src/index.tsx b/samples/menus/nav-drawer/add-mini/src/index.tsx
index 41a4780a1..ce7485b50 100644
--- a/samples/menus/nav-drawer/add-mini/src/index.tsx
+++ b/samples/menus/nav-drawer/add-mini/src/index.tsx
@@ -1,13 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, IgrNavDrawerModule, IgrIconModule, IgrButtonModule, registerIconFromText } from 'igniteui-react';
+import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrNavDrawerModule.register();
-IgrIconModule.register();
-IgrButtonModule.register();
-
 const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
 const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
 
@@ -29,34 +25,34 @@ export default class NavDrawerAddMini extends React.Component<any, any> {
             <div className="container sample">
                 <div style={{ width: '100%' }}>
                     <IgrButton onClick={this.onButtonClick} style={{ marginLeft: '70px' }}>
-                        <span key="sButton">Toggle</span>
+                        <span>Toggle</span>
                     </IgrButton>
                 </div>
                 <div onClick={this.onNavDrawerClick}>
                     <IgrNavDrawer ref={this.navDrawerRef}>
-                        <IgrNavDrawerItem key="home">
-                            <div slot="icon" key="iHome">
+                        <IgrNavDrawerItem >
+                            <div slot="icon">
                                 <IgrIcon name="home" collection="material" />
                             </div>
-                            <span slot="content" key="sHome">Home</span>
+                            <span slot="content">Home</span>
                         </IgrNavDrawerItem>
 
-                        <IgrNavDrawerItem key="search">
-                            <div slot="icon" key="iSearch">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="search" collection="material" />
                             </div>
-                            <span slot="content" key="sSearch">Search</span>
+                            <span slot="content">Search</span>
                         </IgrNavDrawerItem>
 
-                        <div slot="mini" key="miniSlot">
-                            <IgrNavDrawerItem key="miniHome">
-                                <div slot="icon" key="iMiniHome">
+                        <div slot="mini">
+                            <IgrNavDrawerItem>
+                                <div slot="icon">
                                     <IgrIcon name="home" collection="material" />
                                 </div>
                             </IgrNavDrawerItem>
 
-                            <IgrNavDrawerItem key="miniSearch">
-                                <div slot="icon" key="iMiniSearch">
+                            <IgrNavDrawerItem>
+                                <div slot="icon">
                                     <IgrIcon name="search" collection="material" />
                                 </div>
                             </IgrNavDrawerItem>
@@ -74,16 +70,16 @@ export default class NavDrawerAddMini extends React.Component<any, any> {
 
     public onNavDrawerClick(e: any) {
         const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
-                                (e.target.parentElement?.closest('igc-nav-drawer-item') ?? 
-                                null)
+            (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+                null)
 
         if (!drawerItem) { return; }
 
         drawerItem.active = true;
         const navDrawer = drawerItem.parentElement;
         Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
-             .filter((item: any) => item !== drawerItem)
-             .forEach((child: any) => child.active = false);
+            .filter((item: any) => item !== drawerItem)
+            .forEach((child: any) => child.active = false);
 
         const iconName = drawerItem.querySelector('igc-icon')!.name;
         const icons = document.querySelectorAll(`igc-icon`);
diff --git a/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx b/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
index 52f73f296..5e6aea8b7 100644
--- a/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
+++ b/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
@@ -1,15 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, IgrNavDrawerModule, IgrNavbarModule, IgrRadioGroupModule, IgrRadioModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, registerIconFromText, IgrRadioChangeEventArgs } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrNavDrawerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrRadioGroupModule.register();
-IgrRadioModule.register();
-
 const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
 const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
 const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';
@@ -38,45 +32,45 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
             <div className="container sample">
                 <div onClick={this.onNavDrawerClick}>
                     <IgrNavDrawer ref={this.navDrawerRef} position={this.state.drawerPosition}>
-                        <IgrNavDrawerHeaderItem key="header">
-                            <span key="sHeader">Sample Drawer</span>
+                        <IgrNavDrawerHeaderItem>
+                            <span>Sample Drawer</span>
                         </IgrNavDrawerHeaderItem>
 
-                        <IgrNavDrawerItem key="home" active>
-                            <div slot="icon" key="iHome">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="home" collection="material" />
                             </div>
-                            <span slot="content" key="sHome">Home</span>
+                            <span slot="content">Home</span>
                         </IgrNavDrawerItem>
 
-                        <IgrNavDrawerItem key="search">
-                            <div slot="icon" key="iSearch">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="search" collection="material" />
                             </div>
-                            <span slot="content" key="sSearch">Search</span>
+                            <span slot="content">Search</span>
                         </IgrNavDrawerItem>
                     </IgrNavDrawer>
                 </div>
                 <div>
                     <IgrRadioGroup alignment="horizontal" style={{ marginBottom: '10px' }}>
-                        <IgrRadio name="position" value="start" labelPosition="after" checked={true} onChange={this.onRadioChange} key="start">
-                            <span key="sStart">Start</span>
+                        <IgrRadio name="position" value="start" labelPosition="after" checked={this.state.drawerPosition === "start"} onChange={this.onRadioChange}>
+                            <span>Start</span>
                         </IgrRadio>
-                        <IgrRadio name="position" value="end" labelPosition="after" onChange={this.onRadioChange} key="end">
-                            <span key="sEnd">End</span>
+                        <IgrRadio name="position" value="end" labelPosition="after" checked={this.state.drawerPosition === "end"} onChange={this.onRadioChange}>
+                            <span>End</span>
                         </IgrRadio>
-                        <IgrRadio name="position" value="top" labelPosition="after" onChange={this.onRadioChange} key="top">
-                            <span key="sTop">Top</span>
+                        <IgrRadio name="position" value="top" labelPosition="after" checked={this.state.drawerPosition === "top"} onChange={this.onRadioChange}>
+                            <span>Top</span>
                         </IgrRadio>
-                        <IgrRadio name="position" value="bottom" labelPosition="after" onChange={this.onRadioChange} key="bottom">
-                            <span key="sBottom">Bottom</span>
+                        <IgrRadio name="position" value="bottom" labelPosition="after" checked={this.state.drawerPosition === "bottom"} onChange={this.onRadioChange}>
+                            <span>Bottom</span>
                         </IgrRadio>
                     </IgrRadioGroup>
                     <IgrNavbar>
-                        <div slot="start" onClick={this.onMenuIconClick} key="start">
+                        <div slot="start" onClick={this.onMenuIconClick}>
                             <IgrIcon name="menu" collection="material" />
                         </div>
-                        <h2 key="navHome">{this.state.title}</h2>
+                        <h2>{this.state.title}</h2>
                     </IgrNavbar>
                 </div>
             </div>
@@ -91,16 +85,16 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
 
     public onNavDrawerClick(e: any) {
         const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
-                                (e.target.parentElement?.closest('igc-nav-drawer-item') ??
-                                null)
+            (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+                null)
 
         if (!drawerItem) { return; }
 
         drawerItem.active = true;
         const navDrawer = drawerItem.parentElement;
         Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
-             .filter((item: any) => item !== drawerItem)
-             .forEach((child: any) => child.active = false);
+            .filter((item: any) => item !== drawerItem)
+            .forEach((child: any) => child.active = false);
 
         this.setState({ title: drawerItem.textContent });
     }
@@ -110,9 +104,9 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
         this.navDrawer = navDrawer;
     }
 
-    public onRadioChange(e: any) {
+    public onRadioChange(e: IgrRadioChangeEventArgs) {
         if (e.detail.checked) {
-            this.setState({ drawerPosition: e.value });
+            this.setState({ drawerPosition: e.detail.value });
         }
     }
 }
diff --git a/samples/menus/nav-drawer/styling/src/index.tsx b/samples/menus/nav-drawer/styling/src/index.tsx
index 606387a6f..0c1b4359f 100644
--- a/samples/menus/nav-drawer/styling/src/index.tsx
+++ b/samples/menus/nav-drawer/styling/src/index.tsx
@@ -2,16 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import './NavDrawerStyling.css';
-import {
-    IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
-    IgrIconButton, IgrIconButtonModule, registerIconFromText
-} from 'igniteui-react';
+import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrNavDrawerModule.register();
-IgrIconModule.register();
-IgrIconButtonModule.register();
-
 const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
 const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
 const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
@@ -41,22 +34,22 @@ export default class NavDrawerStyling extends React.Component<any, any> {
                 </IgrIconButton>
                 <div onClick={this.onNavDrawerClick}>
                     <IgrNavDrawer open={true} ref={this.navDrawerRef}>
-                        <IgrNavDrawerHeaderItem key="header">
-                            <span key="sHeader">Sample Drawer</span>
+                        <IgrNavDrawerHeaderItem>
+                            <span>Sample Drawer</span>
                         </IgrNavDrawerHeaderItem>
 
-                        <IgrNavDrawerItem key="home">
-                            <div slot="icon" key="iHome">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="home" collection="material" />
                             </div>
-                            <span slot="content" key="sHome">Home</span>
+                            <span slot="content">Home</span>
                         </IgrNavDrawerItem>
 
-                        <IgrNavDrawerItem key="search">
-                            <div slot="icon" key="iSearch">
+                        <IgrNavDrawerItem>
+                            <div slot="icon">
                                 <IgrIcon name="search" collection="material" />
                             </div>
-                            <span slot="content" key="sSearch">Search</span>
+                            <span slot="content">Search</span>
                         </IgrNavDrawerItem>
                     </IgrNavDrawer>
                 </div>
@@ -72,16 +65,16 @@ export default class NavDrawerStyling extends React.Component<any, any> {
 
     public onNavDrawerClick(e: any) {
         const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
-                                (e.target.parentElement?.closest('igc-nav-drawer-item') ??
-                                null)
+            (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+                null)
 
         if (!drawerItem) { return; }
 
         drawerItem.active = true;
         const navDrawer = drawerItem.parentElement;
         Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
-             .filter((item: any) => item !== drawerItem)
-             .forEach((child: any) => child.active = false);
+            .filter((item: any) => item !== drawerItem)
+            .forEach((child: any) => child.active = false);
     }
 
     public navDrawerRef(navDrawer: IgrNavDrawer) {