Custom Theme

react-tweet exports multiple utility functions to help you build your own theme if the default Twitter theme and its customization options don't work for you or if you simply want to build your own.

To get started, we recommend using the source for the Twitter theme (opens in a new tab) as the base and start customizing from there. Which more precisely is all of the components in the react-tweet package (opens in a new tab):

src/tweet.tsx (opens in a new tab): Exports the async Tweet component that fetches the tweet data and renders the tweet. This is a React Server Component (opens in a new tab).
src/twitter-theme/*.tsx (opens in a new tab): All the components that make up the theme.
src/swr.tsx (opens in a new tab): Exports the Tweet component but it uses SWR (opens in a new tab) to fetch the tweet client-side. This is useful if React Server Components are not supported by your React environment.

You can see a custom theme in action by looking at our custom-tweet-dub (opens in a new tab) example.

Publishing your theme

We recommend you follow the same patterns of the Twitter theme before publishing your theme:

Use the props defined by the TweetProps type in your Tweet component.
Support the CSS theme features shown in Toggling theme manually. You can use the base.css (opens in a new tab) file from the Twitter theme as reference.
Support both SWR and React Server Components as explained below.

When you use react-tweet we tell the builder which Tweet component to use with exports in package.json:

package.json

"exports": {
  ".": {
    "react-server": "./dist/index.js",
    "default": "./dist/index.client.js"
  }
},

You can learn more about react-server in the RFC for React Server Module Conventions V2 (opens in a new tab).

If the builder supports React Server Components, it will use the react-server export. Otherwise, it will use the default export.

Each export goes to a different file that exports the Tweet component. In this case index.ts exports a React Server Component and index.client.ts exports the Tweet component that uses SWR:

index.ts

export * from './twitter-theme/components.js'
export * from './tweet.js'
export * from './utils.js'
export * from './hooks.js'

index.client.ts

export * from './twitter-theme/components.js'
export * from './swr.js'
export * from './utils.js'
export * from './hooks.js'

Advanced Contributing