MoonUI

Tweet Card

PRO

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

Unlock advanced capabilities with the Pro version

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-card

Usage

Pro Required
Ada Lovelace
Ada Lovelace
@ada
Shipped our new dashboard with MoonUI Pro today. The components just work — zero fighting with a11y or dark mode. 🚀
2:14 PM · Jul 23, 2026
89K

Examples

Interactive Engagement

PRO

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.

Pro Required
Ada Lovelace
Ada Lovelace
@ada
Tap the heart, repost, and reply — these are real, controlled buttons. The avatar, name, and handle link to the author (author.href) — here onAuthorClick intercepts navigation.
2:14 PM · Jul 23, 2026
89K

Liked: no · Reposted: no · Replies: 42 · Author clicks: 0

Full Tweet

PRO

A complete card: verified author, rich content, timestamp, and metrics. Large numbers are compact-formatted for you (2.4K, 89K).

Pro Required
Grace Hopper
Grace Hopper
@amazing_grace
MoonUI Pro is the first component library where the Pro tier actually feels premium. TweetCard, IconCloud, device mocks — all copy-paste ready.
9:41 AM · Jul 23, 2026
89K

Compact Mode

PRO

Set mode="compact" to tighten padding and hide the metrics row — ideal for dense testimonial lists or sidebars.

Pro Required

With Media

PRO

Pass any React node to the media prop — you own the <img> or grid, so aspect ratio and rounding are fully under your control.

Pro Required
Sara Chen
Sara Chen
@sarabuilds
New landing page is live and it took an afternoon. MoonUI Pro's showcase components did the heavy lifting. 👇
Screenshot of the redesigned landing page
4:20 PM · Jul 21, 2026

Testimonial Wall

PRO

Drop several cards into a responsive grid to build an instant social-proof section for landing or pricing pages.

Pro Required
Maya Ortiz
Maya Ortiz
@mayacodes
MoonUI shipped our redesign two weeks early. The Pro showcase components are unreal.
Jul 20, 2026
Dev Patel
Dev Patel
@devp
Best DX I've had with a component library. Period. Everything is typed and accessible.
Jul 19, 2026
Nora Kim
Nora Kim
@norakim
Dark mode and a11y just work out of the box. My design team is thrilled.
Jul 18, 2026