diff --git a/quartz/components/Group.tsx b/quartz/components/Group.tsx
new file mode 100644
index 000000000..ccb17dc15
--- /dev/null
+++ b/quartz/components/Group.tsx
@@ -0,0 +1,23 @@
+import { concatenateResources } from "../util/resources"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+interface GroupConfig {
+    components: QuartzComponent[]
+}
+
+export default ((config: GroupConfig) => {
+    const Group: QuartzComponent = (props: QuartzComponentProps) => 
+        config.components
+            .map((c: QuartzComponent) => ({ component: c }))
+            .map((it: { component: QuartzComponent} ) => (<it.component {...props} />))
+
+
+    Group.afterDOMLoaded = concatenateResources(
+        ...config.components.map((c) => c.afterDOMLoaded),
+    )
+    Group.beforeDOMLoaded = concatenateResources(
+        ...config.components.map((c) => c.beforeDOMLoaded),
+    )
+    Group.css = concatenateResources(...config.components.map((c) => c.css))
+    return Group
+}) satisfies QuartzComponentConstructor<GroupConfig>
\ No newline at end of file
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index cece8e614..bf7a0f35b 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -23,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
 import ConditionalRender from "./ConditionalRender"
+import Group from "./Group"
 
 export {
   ArticleTitle,
@@ -50,4 +51,5 @@ export {
   Comments,
   Flex,
   ConditionalRender,
+  Group
 }