Import Markdown files in your Storybook MDX docs

Storybook allows you to import existing Markdown files your MDX docs. You just need configure the transcludeMarkdown option in your storybook config:

// .storybook/main.js
module.exports = {
  addons: [
    {
      name: "@storybook/addon-docs",
      options: { transcludeMarkdown: true },
    },
  ],
  // ...
};

Then you can import your Markdown file in your MDX file and render it as a component:

import Example from "./Example.md";

# Hello World

<Example />