iPhone, Browser and Social Post Mockups for React
ReactFrame has 13 React mockup components (8 free): realistic iPhone, iPad, desktop and browser frames that play your screenshots and videos, scroll-driven phone stories, and Instagram, X, LinkedIn and TikTok post mockups.
How to choose
- Show an app: phone-mockup, phone-gallery or sticky-phone-scroll for a scroll story.
- Show a website: browser-mockup or desktop-mockup-carousel.
- Show a social campaign: instagram-post-mockup, x-post-mockup, linkedin-post-mockup, tiktok-post-mockup.
All 13 components
- Phone Marquee ShowcasePremium
- A blurred, dimmed marquee of scrolling image/video rows fills the background, a sharp iPhone frame in front shows the exact same rows in perfect focus through its screen, with 3D cursor tilt and ambient glow.
- Phone MockupFree
- A realistic iPhone frame with 3D cursor tilt, a tilt-tracking screen glare, ambient glow, and a story-style video/image player with swipe navigation.
- npx shadcn@latest add https://reactframe.com/r/phone-mockup.json
- Browser MockupFree
- A realistic browser chrome frame in macOS, Windows, or mobile Safari style, with tabs, a URL bar, and a content area for an image, video, or arbitrary children.
- npx shadcn@latest add https://reactframe.com/r/browser-mockup.json
- Instagram Post MockupFree
- A realistic Instagram post with a swipeable multi-photo carousel, double-tap-to-like heart burst, and like/comment/repost/share/save actions.
- npx shadcn@latest add https://reactframe.com/r/instagram-post-mockup.json
- X Post MockupFree
- A realistic X (Twitter) post with a verified badge, media image, and interactive like/retweet/bookmark actions with live counts.
- npx shadcn@latest add https://reactframe.com/r/x-post-mockup.json
- TikTok Post MockupFree
- A full-bleed 9:16 TikTok feed mockup with a side action rail, caption overlay, sound pill, and bottom navigation.
- npx shadcn@latest add https://reactframe.com/r/tiktok-post-mockup.json
- LinkedIn Post MockupFree
- A realistic LinkedIn post with a headline, media image, a reaction summary, and interactive like/repost actions with live counts.
- npx shadcn@latest add https://reactframe.com/r/linkedin-post-mockup.json
- iPad Mockup CarouselPremium
- A realistic iPad Pro mockup with an internal video/image carousel, swipe or auto-advance, slide/fade transitions, portrait/landscape orientation, 3D cursor tilt, ambient glow, and a progress bar.
- Desktop Mockup CarouselFree
- A realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance, slide/fade transitions, 3D cursor tilt, ambient glow, and a progress bar.
- npx shadcn@latest add https://reactframe.com/r/desktop-mockup-carousel.json
- Phone GalleryPremium
- A carousel of hand-built iPhone frames in row, stacked or fan layout, with 3D cursor tilt on the active phone, autoplay, dot pagination and arrow controls.
- Sticky Phone ScrollPremium
- A scroll-driven feature section, a sticky iPhone frame and crossfading stat cards on one side, a heading/description/CTA that swaps per slide on the other, with an animated background color transition and a progress rail.
- Phone Analytics MockupPremium
- An interactive iPhone mockup playing a swipeable story-style media carousel with an avatar/username/verified-badge overlay, 3D cursor tilt, ambient glow, a dark/light theme, and up to ten optional floating analytics cards (tracking, stats, sparkline, engagement, platform split, notifications, follower growth, revenue) positioned around it.
- Window Frame MockupFree
- A desktop app window to put your product in: drag it around, resize it from the corner, zoom it with a double-click, and send it to the dock and back.
- npx shadcn@latest add https://reactframe.com/r/window-frame-mockup.json
Questions
- Can I put live UI inside a mockup?
- browser-mockup renders children, so real UI can go inside it. The phone and tablet frames play the images or videos you pass as media.
- Are these components free?
- 8 of the 13 are free (Phone Mockup, Browser Mockup, Instagram Post Mockup, X Post Mockup, TikTok Post Mockup, LinkedIn Post Mockup, Desktop Mockup Carousel, Window Frame Mockup); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.