diff --git a/ui/packages/consul-ui/lib/custom-element/index.js b/ui/packages/consul-ui/lib/custom-element/index.js
new file mode 100644
index 0000000000..6a52e24e09
--- /dev/null
+++ b/ui/packages/consul-ui/lib/custom-element/index.js
@@ -0,0 +1,63 @@
+'use strict';
+
+module.exports = {
+  name: require('./package').name,
+  getTransform: function() {
+    return {
+      name: 'custom-element',
+      plugin: class {
+        transform(ast) {
+          this.syntax.traverse(ast, {
+            ElementNode: (node) => {
+              if(node.tag === 'CustomElement') {
+                node.attributes = node.attributes
+                  // completely remove these ones, they are not used runtime
+                  // element is potentially only temporarily being removed
+                  .filter(item => !['element', 'description', 'slots', 'cssparts'].includes(`${item.name.substr(1)}`))
+                  .map(item => {
+                    switch(true) {
+                      // these ones are ones where we need to remove the documentation only
+                      // the attributes themselves are required at runtime
+                      case ['attrs', 'cssprops'].includes(`${item.name.substr(1)}`):
+                        item.value.params = item.value.params.map(item => {
+                          // we can't use arr.length here as we don't know
+                          // whether someone has used the documentation entry
+                          // in the array or not We use the hardcoded `3` for
+                          // the moment if that position needs to change per
+                          // property we can just add more cases for the
+                          // moment
+                          item.params = item.params.filter((item, i, arr) => i < 3);
+                          return item;
+                        });
+                        break;
+
+                    }
+                    return item;
+                  });
+              }
+            },
+          });
+          return ast;
+        }
+
+      },
+      baseDir: function() {
+        return __dirname;
+      },
+      cacheKey: function() {
+        return 'custom-element';
+      }
+    };
+  },
+  setupPreprocessorRegistry(type, registry) {
+    const transform = this.getTransform();
+    transform.parallelBabel = {
+      requireFile: __filename,
+      buildUsing: 'getTransform',
+      params: {}
+    };
+    registry.add('htmlbars-ast-plugin', transform);
+  },
+
+};
+
diff --git a/ui/packages/consul-ui/lib/custom-element/package.json b/ui/packages/consul-ui/lib/custom-element/package.json
new file mode 100644
index 0000000000..b952847350
--- /dev/null
+++ b/ui/packages/consul-ui/lib/custom-element/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "custom-element",
+  "dependencies": {
+    "ember-cli-htmlbars": "*",
+    "ember-cli-babel": "*"
+  },
+  "keywords": [
+    "ember-addon"
+  ]
+}
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index c02b8b9a5c..4b12825962 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -185,6 +185,7 @@
       "lib/block-slots",
       "lib/colocated-components",
       "lib/commands",
+      "lib/custom-element",
       "lib/startup"
     ]
   }