Skip to content

How to Use MDX Shortcodes in Astro

Created: – Last Updated:

Web Development

Let’s assume that you have the following page that uses Astro’s Content Collections (opens in a new tab) feature:

src/pages/[...slug].astro
---
import { getCollection } from 'astro:content'


export async function getStaticPaths() {
  const entries = await getCollection('blog')
  return entries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }))
}
const { entry } = Astro.props
const { Content } = await entry.render()
---


<h1>{entry.data.title}</h1>
<Content />

You now want to use a <Collapsible> component in your MDX files without having to import it each and every time. You can use shortcodes for this.

All you have to do is to pass your custom components to <Content>:

src/pages/[...slug].astro
---
import { getCollection } from 'astro:content'
import Collapsible from '../components/collapsible.astro'


export async function getStaticPaths() {
  // getStaticPaths()
}


const { entry } = Astro.props
const { Content } = await entry.render()
---


<h1>{entry.data.title}</h1>
<Content components={{ Collapsible }} />
Edit on GitHub - Share on Bluesky / Mastodon