diff --git a/src/content/docs/en/guides/integrations-guide/mdx.mdx b/src/content/docs/en/guides/integrations-guide/mdx.mdx
index 8848e087aa998..4d0a1a428ac2a 100644
--- a/src/content/docs/en/guides/integrations-guide/mdx.mdx
+++ b/src/content/docs/en/guides/integrations-guide/mdx.mdx
@@ -247,6 +247,24 @@ const { Content } = await render(entry);
 <Content components={{ h1: CustomHeading }} />
 ```
 
+### Using web components in MDX
+
+If you have a web component defined in a separate JavaScript file, you can include it in your MDX file by importing the script and adding a `<script>` tag with `type="module"`.
+The script will be executed on the client side.
+
+```js title="src/web-component.js"
+class MyEl extends HTMLElement { ... }
+customElements.define('my-el', MyEl);
+```
+
+```mdx title="src/Page.mdx"
+import webComponent from "./web-component.js?url";
+
+<script src={webComponent} type="module"></script>
+
+<my-el />
+```
+
 ## Configuration
 
 Once the MDX integration is installed, no configuration is necessary to use `.mdx` files in your Astro project.