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:

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:

<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.