diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts
new file mode 100644
index 0000000000..6f7c276c34
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts
@@ -0,0 +1,8 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Color Picker',
+	alias: 'Umbraco.ColorPicker',
+	meta: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index 352b8cc67d..3d3d37b71b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -1,12 +1,8 @@
+import { manifest as UmbracoColorPicker } from './Umbraco.ColorPicker';
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorModel> = [
-	{
-		type: 'propertyEditorModel',
-		name: 'Color Picker',
-		alias: 'Umbraco.ColorPicker',
-		meta: {},
-	},
+	UmbracoColorPicker,
 	{
 		type: 'propertyEditorModel',
 		name: 'Content Picker',