Introduction

react-tweet allows you to embed tweets in your React application when using Next.js, Create React App, Vite, and more. This library does not require using the Twitter API. Tweets can be rendered statically, preventing the need to include an iframe and additional client-side JavaScript.

You can see how it in action in react-tweet-next.vercel.app/light/1629307668568633344 (opens in a new tab). Replace the tweet ID in the URL to see other tweets.

This library is fully compatible with React Server Components. Learn more (opens in a new tab).

Installation

Install react-tweet using your package manager of choice:

pnpm add react-tweet

yarn add react-tweet

npm install react-tweet

Now follow the usage instructions for your framework or builder:

Choosing a theme

The prefers-color-scheme (opens in a new tab) CSS media feature is used to select the theme of the tweet.

Toggling theme manually

The closest data-theme attribute on a parent element can determine the theme of the tweet. You can set it to light or dark, like so:

<div data-theme="dark">
  <Tweet id="1629307668568633344" />
</div>

Alternatively, a parent with the class light or dark will also work:

<div className="dark">
  <Tweet id="1629307668568633344" />
</div>

Updating the theme

In CSS Modules, you can use the :global selector to update the CSS variables used by themes:

.my-class :global(.react-tweet-theme) {
  --tweet-body-font-size: 1rem;
}

For Global CSS the usage of :global is not necessary.

Next.js