diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
index 3fbcc7f0e13fd02..6aedae89b4cb4e8 100644
--- a/src/components/Markdown.astro
+++ b/src/components/Markdown.astro
@@ -1,7 +1,14 @@
 ---
+import { z } from "astro:content";
 import { marked } from "marked";
 
-const content = await Astro.slots.render("default");
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+  text: z.string(),
+});
+
+const { text } = props.parse(Astro.props);
 ---
 
-<Fragment set:html={marked.parseInline(content)} />
+<Fragment set:html={marked.parseInline(text)} />
diff --git a/src/content/docs/style-guide/components/markdown.mdx b/src/content/docs/style-guide/components/markdown.mdx
new file mode 100644
index 000000000000000..06069b86849d78e
--- /dev/null
+++ b/src/content/docs/style-guide/components/markdown.mdx
@@ -0,0 +1,11 @@
+---
+title: Markdown
+---
+
+This component uses `marked` to turn the `text` prop into HTML.
+
+```mdx live
+import { Markdown } from "~/components";
+
+<Markdown text="**foo** <br/> [bar](/style-guide/components/markdown/)" />
+```
\ No newline at end of file