Fix: Markdoc v0.4.0 docs (#7593)

* docs: add docs link to markdoc error

* docs: add named exports guide to README

* chore: changeset

* edit: no like so

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* edit: exposed as named exports

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

---------

Co-authored-by: bholmesdev <bholmesdev@gmail.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

1 files changed, 25 insertions, 0 deletions

diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md
index 4250813d3..15bf24467 100644
--- a/packages/integrations/markdoc/README.md
+++ b/packages/integrations/markdoc/README.md
@@ -136,6 +136,31 @@ Use tags like this fancy "aside" to add some _flair_ to your docs.
 {% /aside %}
 ```
 
+### Use Astro components from npm packages and TypeScript files
+
+You may need to use Astro components exposed as named exports from TypeScript or JavaScript files. This is common when using npm packages and design systems.
+
+You can pass the import name as the second argument to the `component()` function:
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+  tags: {
+    tabs: {
+      render: component('@astrojs/starlight/components', 'Tabs'),
+    },
+  },
+});
+```
+
+This generates the following import statement internally:
+
+```ts
+import { Tabs } from '@astrojs/starlight/components';
+```
+
 ### Custom headings
 
 `@astrojs/markdoc` automatically adds anchor links to your headings, and [generates a list of `headings` via the content collections API](https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html). To further customize how headings are rendered, you can apply an Astro component [as a Markdoc node][markdoc-nodes].