diff --git a/src/ui/src/custom_components/core.ts b/src/ui/src/custom_components/core.ts
new file mode 100644
index 000000000..d3ce15611
--- /dev/null
+++ b/src/ui/src/custom_components/core.ts
@@ -0,0 +1,34 @@
+/**
+ * Declare custom components
+ *
+ * @param customComponents list of components in key-value form
+ */
+export function declareCustomComponents(
+	customComponents: Record<string, unknown>,
+) {
+	const validCustomComponents = {};
+	Object.entries(customComponents).forEach(([key, customComponent]) => {
+		const isValid = checkComponentKey(key);
+		if (isValid) {
+			validCustomComponents[key] = customComponent;
+		}
+	});
+
+	return validCustomComponents;
+}
+
+/**
+ * 	Checks that the key contains only alphanumeric characters and underscores without capital letters
+ *
+ * 	@see https://github.com/writer/writer-framework/issues/517
+ */
+function checkComponentKey(key: string): boolean {
+	const isValidKey = /^[a-z0-9_]+$/.test(key);
+	if (!isValidKey) {
+		console.warn(
+			`custom component '${key}' is ignored. A custom component in 'index.ts' should be declared using only alphanumeric lowercase and _.`,
+		);
+	}
+
+	return isValidKey;
+}
diff --git a/src/ui/src/custom_components/index.ts b/src/ui/src/custom_components/index.ts
index 436ffd20a..1a3244e88 100644
--- a/src/ui/src/custom_components/index.ts
+++ b/src/ui/src/custom_components/index.ts
@@ -2,10 +2,10 @@
 
 import BubbleMessage from "./BubbleMessage.vue";
 import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
-
+import { declareCustomComponents } from "./core";
 // Export an object with the ids and the templates as default
 
-export default {
+export default declareCustomComponents({
 	bubblemessage: BubbleMessage,
-	bubblemessageadvanced: BubbleMessageAdvanced,
-};
+	bubbleMessageadvanced: BubbleMessageAdvanced,
+});