Skip to main content

Customizing Components

Using MDX, you can replace every HTML element that Markdown renders with a custom implementation. This allows you to use a set of design system components when rendering.

src/components/layout.js
import { MDXProvider } from "@mdx-js/react"
import * as DesignSystem from "your-design-system"
export default function Layout({ children }) {
return (
<MDXProvider
components={{
// Map HTML element tag to React component
h1: DesignSystem.H1,
h2: DesignSystem.H2,
h3: DesignSystem.H3,
// Or define component inline
p: props => <p {...props} style={{ color: "rebeccapurple" }} />,
}}
>
{children}
</MDXProvider>
)
}

The following components can be customized with the MDXProvider:

TagNameSyntax
pParagraph
h1Heading 1#
h2Heading 2##
h3Heading 3###
h4Heading 4####
h5Heading 5#####
h6Heading 6######
thematicBreakThematic break***
blockquoteBlockquote>
ulList-
olOrdered list1.
liList item
tableTable`---
trTable row`This
td/thTable cell
prePre
codeCode
emEmphasis_emphasis_
strongStrong**strong**
deleteDelete~~strikethrough~~
codeInlineCode
hrBreak---
aLink<https://mdxjs.com> or [MDX](https://mdxjs.com)
imgImage![alt](https://mdx-logo.now.sh)

How does this work?

Components passed to the MDXProvider are used to render the HTML elements that Markdown creates. It uses React’s Context API.


Edit this page on GitHub
Docs
Tutorials
Plugins
Blog
Showcase