diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
index 3ae605613e..fcbe9b0f3b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-ref-property-editor-ui')
-export class UmbRefPropertyEditorUI extends UUIRefNodeElement {
+export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement {
 	static styles = [...UUIRefNodeElement.styles];
 
 	protected fallbackIcon =
@@ -27,6 +27,6 @@ export class UmbRefPropertyEditorUI extends UUIRefNodeElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-ref-property-editor-ui': UmbRefPropertyEditorUI;
+		'umb-ref-property-editor-ui': UmbRefPropertyEditorUIElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts
new file mode 100644
index 0000000000..effcc5e2a8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts
@@ -0,0 +1,18 @@
+import './ref-property-editor-ui.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbRefPropertyEditorUIElement } from './ref-property-editor-ui.element';
+
+export default {
+	title: 'Components/Ref Property Editor UI',
+	component: 'umb-ref-property-editor-ui',
+	id: 'umb-ref-property-editor-ui',
+} as Meta;
+
+export const AAAOverview: Story<UmbRefPropertyEditorUIElement> = () =>
+	html` <umb-ref-property-editor-ui
+		name="Custom Property Editor UI"
+		alias="Umb.PropertyEditor.CustomUI"></umb-ref-property-editor-ui>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.element.ts
index 78697e8498..c590f351ed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.element.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-ref-property-editor')
-export class UmbRefPropertyEditor extends UUIRefNodeElement {
+export class UmbRefPropertyEditorElement extends UUIRefNodeElement {
 	static styles = [...UUIRefNodeElement.styles];
 
 	protected fallbackIcon =
@@ -27,6 +27,6 @@ export class UmbRefPropertyEditor extends UUIRefNodeElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-ref-property-editor': UmbRefPropertyEditor;
+		'umb-ref-property-editor': UmbRefPropertyEditorElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.stories.ts
new file mode 100644
index 0000000000..7d107d3233
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor/ref-property-editor.stories.ts
@@ -0,0 +1,18 @@
+import './ref-property-editor.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbRefPropertyEditorElement } from './ref-property-editor.element';
+
+export default {
+	title: 'Components/Ref Property Editor',
+	component: 'umb-ref-property-editor',
+	id: 'umb-ref-property-editor',
+} as Meta;
+
+export const AAAOverview: Story<UmbRefPropertyEditorElement> = () =>
+	html` <umb-ref-property-editor
+		name="Custom Property Editor"
+		alias="Umb.PropertyEditor.Custom"></umb-ref-property-editor>`;
+AAAOverview.storyName = 'Overview';