diff --git a/typescript/packages/common-ui/src/components/include.ts b/typescript/packages/common-ui/src/components/include.ts
new file mode 100644
index 000000000..d90b6280f
--- /dev/null
+++ b/typescript/packages/common-ui/src/components/include.ts
@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit-element";
+import { customElement, property } from "lit-element/decorators.js";
+import { view, render, RenderContext } from "../hyperscript/render.js";
+import { VNode } from "../hyperscript/view.js";
+import { eventProps } from "../hyperscript/schema-helpers.js";
+
+export const include = view("common-include", {
+  ...eventProps(),
+  // TODO; This should be split into two properties, vdom and context
+  content: { type: "array" },
+});
+
+@customElement("common-include")
+export class IncludeElement extends LitElement {
+  @property({ type: Array })
+  content: [VNode, RenderContext];
+
+  override render() {
+    const element = render(...this.content);
+
+    return html`${element}`;
+  }
+}
diff --git a/typescript/packages/common-ui/src/hyperscript/tags.ts b/typescript/packages/common-ui/src/hyperscript/tags.ts
index 12dfff483..d6a27dc4e 100644
--- a/typescript/packages/common-ui/src/hyperscript/tags.ts
+++ b/typescript/packages/common-ui/src/hyperscript/tags.ts
@@ -9,3 +9,4 @@ export { span } from "../components/span.js";
 export { h1 } from "../components/h1.js";
 export { p } from "../components/p.js";
 export { button } from "../components/button.js";
+export { include } from "../components/include.js";