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/tag"
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:

Tag Name Syntax
p Paragraph
h1 Heading 1 #
h2 Heading 2 ##
h3 Heading 3 ###
h4 Heading 4 ####
h5 Heading 5 #####
h6 Heading 6 ######
thematicBreak Thematic break ***
blockquote Blockquote >
ul List -
ol Ordered list 1.
li List item
table Table --- | --- | ---
tr Table row This | is | a | table row
td/th Table cell
pre Pre
code Code
em Emphasis _emphasis_
strong Strong **strong**
delete Delete ~~strikethrough~~
code InlineCode
hr Break ---
a Link <https://mdxjs.com> or [MDX](https://mdxjs.com)
img Image ![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
Tutorial
Plugins
Blog
Showcase