Tweet Card
Render a static, on-brand tweet-style social proof card with author identity, verification badge, rich content, media, timestamp, and engagement metrics — no live X/Twitter API required.
Pro features
What the Pro version adds to this component.
Verified Author Identity
Name, handle, avatar, and an optional verification badge with a graceful initial-letter fallback.
Compact-Formatted Metrics
Replies, retweets, likes, and views — large numbers auto-shorten to 2.4K, 89K.
Bring-Your-Own Media
Pass any node to media so you control the image, aspect ratio, and rounding.
Compact Density Mode
A single mode prop switches between full and space-saving layouts for lists.
Testimonial-Wall Ready
Composes cleanly into responsive grids for instant landing-page social proof.
Static & Privacy-Friendly
No live API calls — renders from data you own, keeping cards fast and compliant.
Installation
Install via CLI
npx @moontra/moonui-cli add tweet-cardUsage
Examples
Interactive Engagement
Everything is wireable. Reply, repost, and like are real <button> actions — bind onLike/onRepost to controlled liked/reposted state so the heart fills (rose) and repost turns emerald. The author block (avatar, name, handle) becomes a link via author.href, and onAuthorClick lets you intercept it for SPA routing. Metric counts move ±1 for a live feel.
Full Tweet
A complete card: verified author, rich content, timestamp, and metrics. Large numbers are compact-formatted for you (2.4K, 89K).
Compact Mode
Set mode="compact" to tighten padding and hide the metrics row — ideal for dense testimonial lists or sidebars.
With Media
Pass any React node to the media prop — you own the <img> or grid, so aspect ratio and rounding are fully under your control.
Testimonial Wall
Drop several cards into a responsive grid to build an instant social-proof section for landing or pricing pages.