diff --git a/docs/content/4.api/1.components/2.content-renderer.md b/docs/content/4.api/1.components/2.content-renderer.md
index 71d3ae550..9cf3f8fba 100644
--- a/docs/content/4.api/1.components/2.content-renderer.md
+++ b/docs/content/4.api/1.components/2.content-renderer.md
@@ -20,6 +20,9 @@ Other types will currently be passed to default slot via `v-slot="{ data }"` or
 - `excerpt`{lang=ts}: Whether or not to render the excerpt.
   - Type: `Boolean`{lang=ts}
   - Default: `false`{lang=ts}
+- `components`{lang=ts}: The map of custom components to use for rendering. This prop will pass to markdown renderer and will not affect other file types.
+  - Type: `Object`{lang=ts}
+  - Default: `{}`{lang=ts}
 
 ## Slots
 
@@ -57,3 +60,26 @@ const { data } = await useAsyncData('page-data', () => queryContent('/hello').fi
   </main>
 </template>
 ```
+
+::alert
+Note that when you use default slot and `<ContentRendererMarkdown>` in your template you need to pass `components` to `<ContentRendererMarkdown>`.
+
+```html [pages/[...slug].vue]
+<script setup lang="ts">
+const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
+
+const components = {
+  p: 'CustomParagraph'
+}
+</script>
+
+<template>
+  <main>
+    <ContentRenderer :value="data">
+      <h1>{{ data.title }}</h1>
+      <ContentRendererMarkdown :value="data" :components="components" />
+    </ContentRenderer>
+  </main>
+</template>
+```
+::
\ No newline at end of file
diff --git a/src/runtime/components/ContentRendererMarkdown.vue b/src/runtime/components/ContentRendererMarkdown.vue
index c767a1e2c..34a997470 100644
--- a/src/runtime/components/ContentRendererMarkdown.vue
+++ b/src/runtime/components/ContentRendererMarkdown.vue
@@ -45,6 +45,13 @@ export default defineComponent({
     tag: {
       type: String,
       default: 'div'
+    },
+    /**
+     * The map of custom components to use for rendering.
+     */
+    components: {
+      type: Object,
+      default: () => ({})
     }
   },
   async setup (props) {
@@ -53,14 +60,15 @@ export default defineComponent({
     await resolveContentComponents(props.value.body, {
       tags: {
         ...tags,
-        ...props.value?.tags || {}
+        ...props.value?._components || {},
+        ...props.components
       }
     })
 
     return { tags }
   },
   render (ctx) {
-    const { tags, tag, value } = ctx
+    const { tags, tag, value, components } = ctx
 
     if (!value) {
       return null
@@ -75,7 +83,8 @@ export default defineComponent({
       ...(value as ParsedContentMeta),
       tags: {
         ...tags,
-        ...value?.tags || {}
+        ...value?._components || {},
+        ...components
       }
     }
 
diff --git a/test/__snapshots__/basic.test.ts.snap b/test/__snapshots__/basic.test.ts.snap
index c26a8da8e..e5e530c2d 100644
--- a/test/__snapshots__/basic.test.ts.snap
+++ b/test/__snapshots__/basic.test.ts.snap
@@ -16,6 +16,17 @@ exports[`Basic usage > Get contents index > basic-index-body 1`] = `
       "tag": "h1",
       "type": "element",
     },
+    {
+      "children": [
+        {
+          "type": "text",
+          "value": "Hello World",
+        },
+      ],
+      "props": {},
+      "tag": "p",
+      "type": "element",
+    },
   ],
   "toc": {
     "depth": 2,
diff --git a/test/features/renderer-markdown.ts b/test/features/renderer-markdown.ts
index 2cf5990ce..4aacc0a45 100644
--- a/test/features/renderer-markdown.ts
+++ b/test/features/renderer-markdown.ts
@@ -52,5 +52,15 @@ export const testMarkdownRenderer = () => {
       expect(rendered).toContain('This is an alert for success')
       expect(rendered).toContain('This is an alert for danger')
     })
+
+    test('per-page custom component', async () => {
+      const html = await $fetch('/_partial/custom-paragraph')
+      expect(html).contains('[Paragraph]')
+    })
+
+    test('renderer custom component', async () => {
+      const html = await $fetch('/features/custom-paragraph')
+      expect(html).contains('[Paragraph]')
+    })
   })
 }
diff --git a/test/fixtures/basic/components/content/CustomProseP.vue b/test/fixtures/basic/components/content/CustomProseP.vue
new file mode 100644
index 000000000..aa856bc9b
--- /dev/null
+++ b/test/fixtures/basic/components/content/CustomProseP.vue
@@ -0,0 +1,5 @@
+<template>
+  <p>
+    [Paragraph] <slot />
+  </p>
+</template>
diff --git a/test/fixtures/basic/content/_partial/custom-paragraph.md b/test/fixtures/basic/content/_partial/custom-paragraph.md
new file mode 100644
index 000000000..e804acd77
--- /dev/null
+++ b/test/fixtures/basic/content/_partial/custom-paragraph.md
@@ -0,0 +1,6 @@
+---
+_components:
+  p : CustomProseP
+---
+
+This is a paragraph.
\ No newline at end of file
diff --git a/test/fixtures/basic/content/index.md b/test/fixtures/basic/content/index.md
index 1630f8971..e5a878696 100644
--- a/test/fixtures/basic/content/index.md
+++ b/test/fixtures/basic/content/index.md
@@ -1 +1,4 @@
-# Index
\ No newline at end of file
+# Index
+
+
+Hello World
\ No newline at end of file
diff --git a/test/fixtures/basic/pages/features/custom-paragraph.vue b/test/fixtures/basic/pages/features/custom-paragraph.vue
new file mode 100644
index 000000000..d3158cd01
--- /dev/null
+++ b/test/fixtures/basic/pages/features/custom-paragraph.vue
@@ -0,0 +1,3 @@
+<template>
+  <ContentDoc :path="'/'" :components="{ p: 'CustomProseP' }" />
+</template>