Register MDX Components

Compass uses a shared MDX component registry so your docs articles can render custom Astro components directly. ## Where components are registered The registry lives in src/components/docs/mdx-components.ts. That file exports the components that article routes pass into MDX rendering. ## Add a new component 1. Create the component in src/components/docs 2. Import it in src/components/docs/mdx-components.ts 3. Add it to the exported mdxComponents object Example: ts import Callout from './Callout.astro'; import Tabs from './Tabs.astro'; import Timeline from './Timeline.astro'; export const mdxComponents = { Callout, Tabs, Timeline, }; ## Use it in MDX Once registered, the component is available inside any .mdx article: mdx <Timeline> <p>First milestone</p> </Timeline> ## Where the registry is used Compass passes mdxComponents into the article routes in: - src/pages/[parent]/[category]/[slug].astro If a component is not registered there, MDX articles will not know how to render it.