Quick Tip 🔥 : Embed Tweet in MDX blog post

In a previous article, I wanted to embed a Twitter/X post.

The raw embed code is a bit messy and doesn't look great on a dark theme.

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
    Introducing NEO Beta.<br>Designed for humans. Built for the home.
    <a href="https://t.co/5S6jpRjUQp">pic.twitter.com/5S6jpRjUQp</a>
  </p>&mdash; 1X (@1x_tech)
  <a href="https://twitter.com/1x_tech/status/1829567690681307284?ref_src=twsrc%5Etfw">August 30, 2024</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Luckily, there's a handy package called react-tweet that works great.

Just install it and import it into your MDX file:

npm install react-tweet

import { Tweet } from 'react-tweet';
 
// In your MDX, just pass the X post id as a prop
<Tweet id="1628832338187636740" />

It's that easy. It also supports prefers-color-scheme out of the box – so looks great on both light and dark themes.

Liked this article? Share it on X