TikTok Post Mockup React component
A full-bleed 9:16 TikTok feed mockup with a side action rail, caption overlay, sound pill, and bottom navigation.
About the TikTok Post Mockup component
TikTok Post Mockup is a free 9:16 TikTok feed screen. It has a full-bleed background image and the Following and For You tabs. A right-hand rail shows the avatar with a follow badge plus like, comment, favorite and share counts. The bottom has the @username, a caption clamped to two lines, an "Original sound" pill and the navigation bar.
Set background to an image URL; without one, a purple-blue gradient shows. username, userAvatar, description, likesCount, commentsCount, bookmarksCount and sharesCount fill in the rest, and counts are shortened to K and M. The like and favorite icons are toggle buttons with aria-pressed that turn red and add one. borderRadius (default 20) rounds the frame.
When to use it
Use it on creator, UGC and short-form video marketing pages to show how content will look in the TikTok feed.
Place it in a narrow column (around 300 to 400px wide) so the 9:16 screen reads like a phone.
Installation
Add the TikTok Post Mockup component to your project with the shadcn CLI. It lands in components/tiktok-post-mockup.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/tiktok-post-mockupOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TikTokPostMockup /> accepts 10 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 |
|---|---|---|
| background | string | — |
| borderRadius | number | 20 |
| username | string | "cagla" |
| userAvatar | string | — |
| description | string | "Re25sken #you #fyp✈️" |
| likesCount | number | 133_700 |
| commentsCount | number | 1_056 |
| bookmarksCount | number | 10_200 |
| sharesCount | number | 8_647 |
| allowLike | boolean | true |
- backgroundstring
- borderRadiusnumberDefault: 20
- usernamestringDefault: "cagla"
- userAvatarstring
- descriptionstringDefault: "Re25sken #you #fyp✈️"
- likesCountnumberDefault: 133_700
- commentsCountnumberDefault: 1_056
- bookmarksCountnumberDefault: 10_200
- sharesCountnumberDefault: 8_647
- allowLikebooleanDefault: true
Kits
Sets of components designed to be used together on one site, TikTok Post Mockup included.
Collections
Use-case pages that compare TikTok Post Mockup with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
TikTok Post Mockup FAQ
- Can the background be a video?
- No. background takes an image URL and renders an <img>. To play clips in a phone frame, use Phone Mockup.
- Does it fetch anything from TikTok?
- No. All text, images and counts are props.
- How do I control its size?
- It fills its container's width and keeps a 9:16 aspect ratio, so set the size with the parent's width.
- Can I turn off the like toggle?
- allowLike={false} disables the heart. The favorite button always toggles.
