Document passing components to MDX Content

src/content/docs/en/guides/content-collections.mdx

@@ -401,7 +401,7 @@ const posts = await getCollection('blog');
   ))}
 </ul>
 ```
-#### Rendering body content 
+#### Rendering body content
 
 Once queried, you can render Markdown and MDX entries to HTML using the [`render()`](/en/reference/modules/astro-content/#render) function property. Calling this function gives you access to rendered HTML content, including both a `<Content />` component and a list of all rendered headings.
 
@@ -420,6 +420,23 @@ const { Content, headings } = await render(entry);
 <Content />
 ```
 
+##### Passing components to MDX Content
+
+When rendering MDX entries, pass custom components to the `<Content />` component via the `components` prop:
+
+```astro title="src/pages/blog/post-1.astro" ins="components={{ h1: CustomHeading }}"
+---
+import { getEntry, render } from 'astro:content';
+import CustomHeading from '../components/CustomHeading.astro';
+
+const entry = await getEntry('blog', 'post-1');
+const { Content } = await render(entry);
+---
+<Content components={{ h1: CustomHeading }} />
+```
+
+The `components` object maps HTML element names (`h1`, `h2`, `blockquote`, etc.) to custom components. You can also merge in components exported from the MDX file itself using the spread operator.
+
 #### Passing content as props
 
 A component can also pass an entire collection entry as a prop.

src/content/docs/en/guides/integrations-guide/mdx.mdx

@@ -185,9 +185,13 @@
 <ReactCounter client:load />
 ```
 
-#### Custom components with imported MDX
+#### Rendering MDX with `<Content />`
 
-When rendering imported MDX content, [custom components](#assigning-custom-components-to-html-elements) can be passed via the `components` prop.
+When rendering imported MDX content with the `<Content />` component, including rendering MDX blog posts using content collections, [custom components](#assigning-custom-components-to-html-elements) can be passed via the `components` prop. These components must first be imported, and then are available to the `<Content />` component.
+
+The `components` object maps HTML element names (`h1`, `h2`, `blockquote`, etc.) to your custom components. You can also include all components exported from the MDX file itself using the spread operator (`...`) which must also be imported from your MDX file as `components`.
+
+If you are importing MDX directly from a single file for use in an Astro component, import both the `Content` component and any exported components.
 
 ```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
 ---
@@ -198,6 +202,19 @@
 <Content components={{...components, h1: Heading }} />
 ```
 
+If your MDX file is a content collections entry, then use the content collections `render()` function to access the `<Content />` component.
+
+The following example passes a custom heading to the `<Content />` component via the `components` prop to be used in place of all `<h1>` HTML elements:
+```astro title="src/pages/blog/post-1.astro" ins="components={{ h1: CustomHeading }}"
+---
+import { getEntry, render } from 'astro:content';
+import CustomHeading from '../../components/CustomHeading.astro';
+const entry = await getEntry('blog', 'post-1');
+const { Content } = await render(entry);
+---
+<Content components={{ h1: CustomHeading }} />
+```
+
 :::note
 Custom components defined and exported in an MDX file must be imported and then passed back to the `<Content />` component via the `components` property.
 :::
@@ -378,7 +395,7 @@
 
 Previously known as `customComponentNames`.
 
 An optional property of `optimize` to prevent the MDX optimizer from handling certain element names, like [custom components passed to imported MDX content via the components prop](/en/guides/integrations-guide/mdx/#custom-components-with-imported-mdx).
 
 You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.