🚚 Installation

npm install astro-tweet-card

or

yarn add astro-tweet-card

🔦 Usage

---
import TweetCard from 'astro-tweet-card';
---

<TweetCard id="1654079444816936969" />

Or in MDX:

import TweetCard from 'astro-tweet-card';

<TweetCard id="1654079444816936969" />

Tweet images are optimized by Astro at build time. Since they are hosted on pbs.twimg.com, add that domain to image.domains in astro.config.js:

// astro.config.js
export default defineConfig({
	image: {
		domains: ['pbs.twimg.com'],
	},
});

🔧 Configuration

PropTypeDefaultDescription
idstring(required)Tweet ID to render (a numeric string)
timeoutnumber10000Timeout (ms) for the tweet data request
textPartial<TextLabels>{}Overrides for the built-in UI labels (see Localization)

Localization

Use the text option to localize the tweet card UI into any language. For example, wrap a Chinese tweet card:

---
import TweetCard from 'astro-tweet-card';

const { id } = Astro.props;

const text = {
	replies: '回复',
	reposts: '转发',
	quotes: '引用',
	likes: '喜欢',
	replyingTo: '回复',
	viewOnX: '在 X 上查看',
	notFound: '推文不可用',
};
---

<TweetCard id={id} text={text} />

🎨 Custom Styles

The component ships with built-in default styles, and every customizable visual is exposed through CSS custom properties (CSS variables). Override the following variables to customize the appearance:

VariableDescriptionDefault (light)
--tc-bgCard background#ffffff
--tc-borderBorder color#cfd9de
--tc-textPrimary text color#0f1419
--tc-text-mutedMuted text color#536471
--tc-linkLink color#1d9bf0
--tc-primaryPrimary color (buttons, hover)#1d9bf0
--tc-verifiedVerified badge color#1d9bf0
--tc-font-familyFont family-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
--tc-overlayVideo play button backgroundrgba(0,0,0,0.65)
--tc-hover-bgHover backgroundrgba(29,155,240,0.1)

Dark Mode

Dark styles are not included by default. Override them to match your project’s theme, for example:

@media (prefers-color-scheme: dark) {
	:root {
		--tc-bg: #16181c;
		--tc-border: #2f3336;
		--tc-text: #e7e9ea;
		--tc-text-muted: #71767b;
	}
}

or

.dark {
	--tc-bg: #16181c;
	--tc-border: #2f3336;
	--tc-text: #e7e9ea;
	--tc-text-muted: #71767b;
}