diff --git a/package-lock.json b/package-lock.json
index 4720bd539..1b4bea3fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "@yarnpkg/lockfile": "^1.1.0",
         "babel-polyfill": "^6.26.0",
         "bundlesize": "^1.0.0-beta.2",
+        "cem-plugin-vs-code-custom-data-generator": "^1.4.1",
         "chai": "^4.2.0",
         "chalk": "^4.1.0",
         "concurrently": "^5.2.0",
@@ -6910,6 +6911,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cem-plugin-vs-code-custom-data-generator": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz",
+      "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.7.1"
+      }
+    },
     "node_modules/center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
@@ -22361,7 +22371,7 @@
     },
     "packages/ui": {
       "name": "@lion/ui",
-      "version": "0.2.2",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
         "@bundled-es-modules/message-format": "^6.0.4",
@@ -27907,6 +27917,15 @@
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
       "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg=="
     },
+    "cem-plugin-vs-code-custom-data-generator": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz",
+      "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==",
+      "dev": true,
+      "requires": {
+        "prettier": "^2.7.1"
+      }
+    },
     "center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
diff --git a/package.json b/package.json
index 9830263ef..8a04e6b21 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "babel-polyfill": "^6.26.0",
     "bundlesize": "^1.0.0-beta.2",
+    "cem-plugin-vs-code-custom-data-generator": "^1.4.1",
     "chai": "^4.2.0",
     "chalk": "^4.1.0",
     "concurrently": "^5.2.0",
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
index ffcee8577..9dbb92187 100644
--- a/packages/ui/.gitignore
+++ b/packages/ui/.gitignore
@@ -1 +1,3 @@
-./docs
\ No newline at end of file
+./docs
+vscode.css-custom-data.json
+vscode.html-custom-data.json
\ No newline at end of file
diff --git a/packages/ui/custom-elements-manifest.config.js b/packages/ui/custom-elements-manifest.config.js
new file mode 100644
index 000000000..acb913d53
--- /dev/null
+++ b/packages/ui/custom-elements-manifest.config.js
@@ -0,0 +1,3 @@
+import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator';
+
+export default { plugins: [generateCustomData()] };