This might be a bit confusing but the template includes 2 mdx-components.tsx files. One on the top-level. And one in app/_constants/.

You can safely ignore the one on the top-level. This file is needed in order to use MDX within NextJS and I didn't want to mess with it.

So, for any changes you want to make to MDX rendering, refer to the file app/_constants/mdx-components.tsx.

These custom MDX components will be rendered when being called within any .mdx file throughout the app.

Currently, there are the following custom MDX components.

  • h1: Will provide the h1 tag with an id property (e.g. for linking).
  • h2: Will provide the h2 tag with an id property (e.g. for linking).
  • h3: Will provide the h3 tag with an id property (e.g. for linking).
  • HowToStep: Will provide a step within the Step-By-Step-Guide, with its own index and title.
  • CodeBlock: Will provide a custom code block, with syntax highlighting.
  • SubSectionOuterContainer: Will provide basic section styling.
  • SubSectionInnerContainer: Will provide basic section styling.
  • SubSectionTitle: Will provide basic section title styling.

For example, if your custom h1 styling is needed:

// Instead of 
// # Title1
// You can use

Interested in kickstarting your next project?

Get the latest boilerplates, components, and news straight to your inbox.

By signing up, you agree to our Privacy Policy