diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/file-system-tree-item/file-system-tree-item.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/file-system-tree-item/file-system-tree-item.context.ts
new file mode 100644
index 0000000000..2426614064
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/file-system-tree-item/file-system-tree-item.context.ts
@@ -0,0 +1,10 @@
+import { UmbTreeItemContextBase } from '../tree-item-base/tree-item-base.context';
+import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+
+// TODO get unique method from an entity repository static method
+export class UmbFileSystemTreeItemContext extends UmbTreeItemContextBase<FileSystemTreeItemPresentationModel> {
+	constructor(host: UmbControllerHostInterface, treeItem: FileSystemTreeItemPresentationModel) {
+		super(host, treeItem, (x: FileSystemTreeItemPresentationModel) => x.path);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/file-system-tree-item/file-system-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/file-system-tree-item/file-system-tree-item.element.ts
new file mode 100644
index 0000000000..3572e6dccc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/file-system-tree-item/file-system-tree-item.element.ts
@@ -0,0 +1,41 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbFileSystemTreeItemContext } from './file-system-tree-item.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { ManifestKind } from '@umbraco-cms/backoffice/extensions-registry';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
+import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+
+// TODO: Move to separate file:
+const manifest: ManifestKind = {
+	type: 'kind',
+	alias: 'Umb.Kind.FileSystemTreeItem',
+	matchKind: 'fileSystem',
+	matchType: 'treeItem',
+	manifest: {
+		type: 'treeItem',
+		elementName: 'umb-file-system-tree-item',
+	},
+};
+umbExtensionsRegistry.register(manifest);
+
+@customElement('umb-file-system-tree-item')
+export class UmbFileSystemTreeItemElement extends UmbLitElement {
+	static styles = [UUITextStyles, css``];
+
+	@property({ type: Object, attribute: false })
+	item?: FileSystemTreeItemPresentationModel;
+
+	render() {
+		if (!this.item) return nothing;
+		new UmbFileSystemTreeItemContext(this, this.item);
+		return html`<umb-tree-item-base .item=${this.item}></umb-tree-item-base>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-file-system-tree-item': UmbFileSystemTreeItemElement;
+	}
+}