X Post Mockup React component
A realistic X (Twitter) post with a verified badge, media image, and interactive like/retweet/bookmark actions with live counts.
About the X Post Mockup component
X Post Mockup is a free recreation of a post on X (formerly Twitter). It shows the avatar, display name, verified badge, @handle and X logo, then the post text, an optional image, and the time and date. At the bottom is a row of reply, repost, like, views, bookmark and share actions with counts.
Pass username, handle, userAvatar, tweetText, mediaImage, repliesCount, retweetsCount, likesCount, viewsCount (default 5,600,000, shown as 5.6M), timePosted and datePosted. theme is "dark" by default, or "light". Repost, like and bookmark are toggle buttons with aria-pressed: they change color and add one to their count. allowLike, allowRetweet and allowBookmark turn each one off.
When to use it
Use it for testimonials, launch announcements and social proof sections, where a quote looks more credible in the familiar post layout.
For a quote without platform styling, use Blockquote or Testimonial Wall.
Installation
Add the X Post Mockup component to your project with the shadcn CLI. It lands in components/x-post-mockup.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/x-post-mockupOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<XPostMockup /> accepts 17 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| borderRadius | number | 16 |
| username | string | "Akem" |
| handle | string | "AkemyDesign" |
| userAvatar | string | — |
| showVerified | boolean | true |
| tweetText | string | "Slow mornings, warm light, and a kitchen that finally feels like home. 🤍" |
| mediaImage | string | — |
| likesCount | number | 688 |
| retweetsCount | number | 15 |
| repliesCount | number | 9 |
| viewsCount | number | 5_600_000 |
- theme"dark" | "light"Default: "dark"
- borderRadiusnumberDefault: 16
- usernamestringDefault: "Akem"
- handlestringDefault: "AkemyDesign"
- userAvatarstring
- showVerifiedbooleanDefault: true
- tweetTextstringDefault: "Slow mornings, warm light, and a kitchen that finally feels like home. 🤍"
- mediaImagestring
- likesCountnumberDefault: 688
- retweetsCountnumberDefault: 15
- repliesCountnumberDefault: 9
- viewsCountnumberDefault: 5_600_000
Show all 17 propsShow fewer
| timePosted | string | "15:51" |
| datePosted | string | "Jun 4, 2026" |
| allowLike | boolean | true |
| allowRetweet | boolean | true |
| allowBookmark | boolean | true |
- timePostedstringDefault: "15:51"
- datePostedstringDefault: "Jun 4, 2026"
- allowLikebooleanDefault: true
- allowRetweetbooleanDefault: true
- allowBookmarkbooleanDefault: true
Kits
Sets of components designed to be used together on one site, X Post Mockup included.
Collections
Use-case pages that compare X Post Mockup with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
X Post Mockup FAQ
- Does it pull a real post from X?
- No. It doesn't call the X API or embed anything. The text, image and counts come from props, so it renders without any network request to X.
- Are line breaks in tweetText kept?
- Yes. The text uses white-space: pre-wrap, so a \n in the string starts a new line.
- Why is my image cropped?
- mediaImage fills the full width with object-cover and has a maximum height of 320px, so tall images get cropped.
- Do reply, views and share do anything?
- No. They are buttons with aria-labels but no action. Only repost, like and bookmark toggle.
