How to create a custom component for a Markdown or Mdx page?

This example shows you how to add a simple Planet component that yields the word Pluto.

Steps

Create your component

Below is a simple Planet React Component that returns Pluto

// src/components/Planet.js
export default function Planet() {
    return "Pluto"
}

Rules:

• The component should be exported as default (ie export default).
• If it's a interactive component that relies on Browser event (for click), you need to add the use client directive

Register it

You can register it by:

• adding it in the components section of the configuration file
• and setting the type to content

{
  "components": {
    "Pluto": {
      "importPath": "src/components/Planet.js",
      "type": "content"
    }
  }
}

Use it

You can now use it in a Markdown page

<Planet/>

It will yield: Pluto

Ref

This example is based on the example of the official mdx documentation