diff --git a/demo/index.html b/demo/index.html
index 3a3e800..acce52a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -42,8 +42,10 @@
     </script>
     
     <script type="module">
-      import { registerComponent } from '../index.js';
-      registerComponent('custom-menu');
+      import { AuroMenu } from '../src/auro-menu.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-menu', AuroMenu);
     </script>
 
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
diff --git a/demo/index.md b/demo/index.md
index 53a29d6..56faeaa 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -66,6 +66,12 @@ There are two important parts of every Auro component. The <a href="https://deve
 
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
+```js
+import { AuroMenu } from '../src/auro-menu.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+RuntimeUtils.default.prototype.registerComponent('custom-menu', AuroMenu);
+```
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
diff --git a/docs/partials/index.md b/docs/partials/index.md
index d9f5346..66f7f77 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -41,6 +41,12 @@ There are two important parts of every Auro component. The <a href="https://deve
 
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
+```js
+import { AuroMenu } from '../src/auro-menu.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+RuntimeUtils.default.prototype.registerComponent('custom-menu', AuroMenu);
+```
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/index.js b/index.js
index c3485df..323a269 100644
--- a/index.js
+++ b/index.js
@@ -1,15 +1,4 @@
 import { AuroMenu } from './src/auro-menu.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
- const registerComponent = (name = 'custom-menu') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroMenu {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('auro-menu', AuroMenu);