Social MediaStable

Tweet Ad

Sourcecomponents/social/TweetAd.astro

The tweet ad

An ugly ad built to look like a screenshot of a Twitter / X post — avatar, verified name, @handle, the tweet, the timestamp and the reply / retweet / like / views row. On purpose it uses none of the brand’s design; it has to read as a post someone screenshotted and shared. Same family as the chat, note and sticky ads.

Comes in X’s light and “dim” dark themes. Set it with theme.

Feed 1080 × 1350

Story 1080 × 1920

Reaction repost

The same tweet dropped onto a neutral background as a screenshot card, with a casual reaction line above it — the way people quote a screenshot with a comment like “wer hat ihr das erlaubt 💀”. Wrap the ad (with bare) in <ReactionPost>.

Reaction · Feed 1080 × 1350

Parts

Theme — theme switches light vs. X’s dim dark mode.
Author — avatar, display name, optional blue check, @handle.
Body — the tweet. <br> for line breaks, <b> for a name.
Metrics — timestamp + reply / retweet / like / views counts.

Props

Prop	Type	Default	Notes
`theme`	'light' \| 'dim'	`'light'`	White, or X’s “dim” dark mode.
`format`	'portrait' \| 'story'	`'portrait'`	portrait = 1080×1350. story = 1080×1920.
`name / handle`	string	`—`	Display name and @handle.
`verified`	boolean	`false`	Blue verified check next to the name.
`initials / avatar`	string	`'A'`	Avatar — initials, or an image via avatar.
`bodyHtml`	string	`''`	The tweet text. <br>, <b>, and <span class="tw-tag"> for @/# in blue.
`time / date`	string	`—`	The timestamp line under the tweet.
`replies / retweets / likes / views`	string	`—`	The engagement counts. Write them like X does — “3.4Tsd”, “184Tsd”.

Usage

Write it like a real tweet — a hot take, a confession, a “unpopular opinion”. Drop the product mid-thought, not as the punchline. Big, believable engagement numbers sell that it went off.

<TweetAd
  theme="light"
  format="portrait"
  name="Alex" handle="alexbaut" verified
  bodyHtml="unpopular opinion: du brauchst keine agentur.<br><br>hab meine website in 12 wochen mit <b>Sparklin</b> selbst gebaut 💀"
  time="8:14 vorm." date="23. Aug. 2026"
  replies="48" retweets="212" likes="3.4Tsd" views="184Tsd"
/>

Rules

Sound like a person with an opinion, not a brand.

Keep the metrics believable for the take.

Don't

Brand it. No logos, no tokens — it’s a screenshot.

Write it like an ad. No CTA, no “jetzt buchen”.