Joe PreviteJoe PreviteSee all posts

Writing a Custom Note Component for MDX

Last updated:

Back when I was looking for inspiration while building my personal website and blog, I stumbled upon Tania Rascia’s site.

One of my favorite parts were her “custom blocks” - colorful components used to annoate or add helpful information to her articles. I made a note to create some for mine when I had the time.

Now that I’ve found the time, I’ve learned there are multiple ways to do it. In this post, I’ll explain a couple of ways to write a custom <Note /> component for MDX.


We can go the JSX route and do it straight up.




This works and it’s intuitive, but it feels like a lot of work! I’d rather write Markdown and let MDX handle the rest for me.


I learned(thanks to @woorm for pointing this out on the MDX Spectrum community) that I can use my component as a “JSX Wrapper”. This means I can wrap my Markdown content within my <Note />.


  **Note:** You _might_ want to check this out! [Link](

Note: You might want to check this out! Link

I like this approach more because it allows me to a) write markdown and b) put it in a styled container. I let MDX handle the hard stuff for me!

Join the Newsletter

I send a monthly newsletter with 1 exciting thing, 1 helpful thing, and new jobs.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.