Twitter

The <ShowcaseTwitter> component can be used to showcase Twitter (also known as X) posts or tweets.

Import

import { ShowcaseTwitter } from 'starlight-showcases'

Usage

Specify a list of Twitter posts to display using the entries prop.

src/content/docs/showcase.mdx

import { ShowcaseTwitter } from 'starlight-showcases'

<ShowcaseTwitter
  entries={[
    'https://x.com/astrodotbuild/status/1791519480696168572',
    'https://x.com/astrodotbuild/status/1726752143204393421',
  ]}
/>

The above code generates the following on the page:

Starlight v0.23 is out now! 🌟

- Up to 40% faster build times for sites using MDX (thanks @bluwyoo!)
- New CSS styles for <details> elements

Get started today: https://t.co/cfocUgAuxD

— Astro (@astrodotbuild) May 17, 2024

Starlight v0.13 is here—now with super-powered code blocks!https://t.co/kkDOpwRZha pic.twitter.com/Fkb3PU3WuM

— Astro (@astrodotbuild) November 20, 2023

The <ShowcaseTwitter> component uses Astro Embed to load a minimal version of Twitter’s widget with zero JavaScript and only static HTML content. To convert the widgets into interactive embeds, check out the Astro Embed “Loading Twitter’s JavaScript” guide.

Props

The <ShowcaseTwitter> component accepts the following props:

entries

required
type: string[]

The list of Twitter post URLs to display. See the Usage section for an example.