Importing and Using Components in MDX
You can import your components from other third party libraries, like
theme-ui. Use cases for external libraries could be charting libraries for adding rich data visualizations, form components for adding email signups, styled portions of content like pullquotes, or call to action buttons throughout your pages. You can also import and reuse your own React components and MDX documents.
To include a component from another library (this example uses the message component from
theme-ui), you need to import it at the top of your MDX file:
Note: steps for importing custom components or MDX documents from a relative location in your project are also covered in the Writing Pages in MDX guide.
To avoid having to import the same component inside of every MDX document you author, you can add components to an
MDXProvider to make them globally available in MDX pages. This pattern is sometimes referred to as shortcodes.
All MDX components passed into the
components prop of the
MDXProvider will be made available to MDX documents that are nested under the provider. The
MDXProvider in this example is in a layout component that wraps all MDX pages, you can read about this pattern in the layout section of the
Now, you can include components in your MDX without importing them:
<Message /> and
<Chart /> components were passed into the provider, they are available for use in all MDX documents.
Edit this page on GitHub