diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index f34a0a03e4..67bd2eb16a 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -5,6 +5,7 @@ import 'element-internals-polyfill';
 
 import './core/router/router-slot.element';
 import './core/router/variant-router-slot.element';
+import './core/context-provider/context-provider.element';
 
 import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';
diff --git a/src/Umbraco.Web.UI.Client/storybook/utils/context-provider/context-provider.element.ts b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
similarity index 72%
rename from src/Umbraco.Web.UI.Client/storybook/utils/context-provider/context-provider.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
index d5e28380e9..502e2b80f5 100644
--- a/src/Umbraco.Web.UI.Client/storybook/utils/context-provider/context-provider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
@@ -2,12 +2,21 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
+import type { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
+/**
+ * Provides a value to the context down the DOM tree.
+ *
+ * @remarks This element is a wrapper around the `provideContext` function.
+ * @slot - The context will be available to all descendants given in the default slot.
+ * @throws {Error} If the key property is not set.
+ * @throws {Error} If the value property is not set.
+ */
 @customElement('umb-context-provider')
 export class UmbContextProviderElement extends UmbLitElement {
 	/**
 	 * The value to provide to the context.
-	 * @required
+	 * @optional
 	 */
 	@property({ type: Object, attribute: false })
 	create?: (host: UmbControllerHostElement) => unknown;
@@ -24,7 +33,7 @@ export class UmbContextProviderElement extends UmbLitElement {
 	 * @required
 	 */
 	@property({ type: String })
-	key!: string;
+	key!: string | UmbContextToken;
 
 	connectedCallback() {
 		super.connectedCallback();
diff --git a/src/Umbraco.Web.UI.Client/storybook/utils/context-provider/context-provider.element.test.ts b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/storybook/utils/context-provider/context-provider.element.test.ts
rename to src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
index 06bd40723d..2f8e50f6ca 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/utils.story-helpers.ts
@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { UmbInstallerContext } from '../installer.context';
-import '../../../storybook/utils/context-provider/context-provider.element';
 
 export const installerContextProvider = (story: any, installerContext = new UmbInstallerContext()) => html`
 	<umb-context-provider