diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/index.ts
index 11d389d6f6..94dd470899 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/index.ts
@@ -1,3 +1,5 @@
 import './input-user-group/user-group-input.element.js';
+import './user-group-ref/user-group-ref.element.js';
 
 export * from './input-user-group/user-group-input.element.js';
+export * from './user-group-ref/user-group-ref.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts
new file mode 100644
index 0000000000..3c0a2371cf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts
@@ -0,0 +1,19 @@
+import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+
+/**
+ *  @element umb-user-group-ref
+ *  @description - Component for displaying a reference to a User Group
+ *  @extends UUIRefNodeElement
+ */
+@customElement('umb-user-group-ref')
+export class UmbUserGroupRefElement extends UmbElementMixin(UUIRefNodeElement) {
+	static styles = [...UUIRefNodeElement.styles];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-user-group-ref': UmbUserGroupRefElement;
+	}
+}