Twitter Theme

This is the theme you’ll see in publish.twitter.com  and the default theme included in react-x-embed.

Its layout is verified against X’s own embed: the repo captures the rendered HTML, shipped CSS, and computed geometry from platform.twitter.com for a set of real tweets, and the aspect ratios here are taken from those measurements rather than chosen by eye.

Usage

In any component, import Tweet from react-x-embed and use it like so:

import { Tweet } from 'react-x-embed'
 
export default function Page() {
  return <Tweet id="2040511285998313827" />
}

Overriding styles

margin and max-width on the container are declared inside :where(), which holds them at zero specificity. Any selector you write wins, regardless of whether your CSS loads before or after the package’s:

.my-wrapper .react-tweet-theme {
  margin: 0;
  max-width: 100%;
}

Everything else is themed through CSS custom properties.

Troubleshooting

react-x-embed uses CSS Modules to scope the CSS of each component, so the bundler where it’s used needs to support CSS Modules. Most do; Node’s own ESM loader does not, which is why importing the package directly in a plain Node script fails with Unknown file extension ".css". If your bundler reports a problem, please open an issue .