Skip to content
Astro Embed

Tweet

The <Tweet> component embeds posts to Twitter (also known as X) in Astro projects.

Usage

The <Tweet> component generates a static Twitter card for a single Tweet using Twitter’s oEmbed API.

---
import { Tweet } from 'astro-embed';
---


<Tweet id="https://twitter.com/astrodotbuild/status/1511750228428435457" />

The above code produces the following result:

Loading Twitter’s JavaScript

By design, <Tweet> is a minimal component and loads zero JavaScript, only rendering some static HTML content. However, this HTML is compatible with Twitter’s widget system. Loading Twitter‘s large bundle of widget JavaScript will convert each <Tweet> into an interactive embed.

You can do this by including the following <script> tag in your Astro layout file:

<script async src="https://platform.twitter.com/widgets.js"></script>

See an example of <Tweet> with Twitter‘s JavaScript

Use Twitter’s dark theme

When loading Twitter’s JavaScript, the <Tweet> card will render with their light theme by default. You can use their dark theme by setting the theme prop:

---
import { Tweet } from 'astro-embed';
---


<Tweet theme="dark" id="..." />

See an example of <Tweet> with Twitter‘s JavaScript and dark theme

Styling the Tweet component

By default the <Tweet> card has minimal styling, which should adapt to your site’s font settings etc.

You can customise it by targeting the .twitter-tweet class, for example:

.twitter-tweet {
  background: floralwhite;
  color: darkblue;
  font-family: cursive;
  font-size: 1.25rem;
  border: 0;
}


.twitter-tweet a {
  color: purple;
  font-weight: bold;
}

The above styles would render <Tweet> like this:

Custom properties API

The <Tweet> component also supports a minimal API for controlling its styles by setting some CSS custom properties.

:root {
  /* Control the padding inside the Tweet card. */
  --tc-padding: 1em;
  /* Set the border color of the Tweet card. */
  --tc-border-color: #cfd9de;
}

Standalone installation

If you only need the <Tweet> component, you can install the package directly instead of the main astro-embed package:

Terminal window
npm i @astro-community/astro-embed-twitter

The <Tweet> component can then be imported as:

import { Tweet } from '@astro-community/astro-embed-twitter';