Mockup Components

Dev Design Library indexes 51 mockup components from 18 open-source UI libraries, with the most coming from Velora UI, ReactFrame, OpenSourceUI, FLX UI and Magic UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Mockup components belong to the Media group.

• MockupdaisyUI · CSS (Tailwind)
• AndroidMagic UI · ReactA mockup of an Android device.
• Mock Browser WindowCult UI · ReactA customizable browser window mockup component with support for Chrome, Safari, and generic styles, customizable…
• Iphone MockupUntitled UI React · React
• Hero SectionLaunch UI · React
• Apple Ipod Mockup CardOpenSourceUI · React
• 3D Bookuselayouts · ReactAn interactive 3D book component with page flip animations.
• Hero Fivecnblocks · SvelteHero section with app mockup image
• Macbook MockupGreatUI · React
• Laptop MockupNexvyn UI · ReactA laptop device-frame illustration for showcasing app screens.
• FrameShark UI · ReactBordered box for grouping related content.
• BrowserWatermelon UI · React
• Hero Threesv-efferd · SvelteA modern hero layout with mega-nav header, device mockup spotlight, and compact logo grid.
• Content 11FLX UI · ReactA billing overview split with a dashboard preview card and two feature highlights, built for the app-shell preset.
• Browser MockupVelora UI · ReactBrowser window frame for product screenshots.
• Browser FrameHalaska UI · React
• Browser MockupReactFrame · ReactA realistic browser chrome frame in macOS, Windows, or mobile Safari style, with tabs, a URL bar, and a content area…
• Container Scroll AnimationAceternity UI · React
• iPhoneMagic UI · ReactA mockup of the iPhone
• MockupLaunch UI · React
• Apple Watch Mockup CardOpenSourceUI · React
• Mobile MockupGreatUI · React
• Phone MockupNexvyn UI · ReactA device-frame illustration with side buttons, dynamic island, and a cropped/scrolled variant for showcasing app…
• DeviceWatermelon UI · React
• Hero Twosv-efferd · SvelteA framed product hero with a floating screen, structured header, and bordered logo section.
• Hero 02FLX UI · ReactA left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top.
• Container ScrollVelora UI · ReactScreenshot panel that rotates flat as it scrolls into view.
• Phone FrameHalaska UI · React
• Desktop Mockup CarouselReactFrame · ReactA realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance…
• Macbook ScrollAceternity UI · React
• SafariMagic UI · ReactA safari browser mockup to showcase your website.
• ScreenshotLaunch UI · React
• Browser Mockup CardOpenSourceUI · React
• Hero 11FLX UI · ReactA split-copy hero with a light product studio mock — issue feed, properties, and a floating agent panel that fades…
• Split CTA with product visualVelora UI · ReactTwo-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
• Instagram Post MockupReactFrame · ReactA realistic Instagram post, avatar ring, swipeable multi-photo carousel, double-tap-to-like heart burst…
• Laptop Mockup CardOpenSourceUI · React
• Hero 14FLX UI · ReactA centered product hero with dual CTAs, a full-width photo with a floating block-builder demo panel, and a logo strip.
• Alternating screenshot rowsVelora UI · ReactTwo alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped.
• LinkedIn Post MockupReactFrame · ReactA realistic LinkedIn post with a headline, media image, a reaction summary, and interactive like/repost actions with…
• Phone Mockup CardOpenSourceUI · React
• Dashboard previewFLX UI · ReactA layered app dashboard with a floating notification.
• Tabbed product tourVelora UI · ReactProduct tour with animated tabs; each tab pairs short copy and a checklist with a Tailwind-built app mock.
• Phone MockupReactFrame · ReactA realistic iPhone frame with 3D cursor tilt, a screen glare that tracks the tilt, ambient glow, and a story-style…
• Tablet Mockup CardOpenSourceUI · React
• Product screenshot heroVelora UI · ReactCentered headline above a dashboard in a browser frame with a border beam and a logo row.
• TikTok Post MockupReactFrame · ReactA full-bleed 9:16 TikTok feed mockup with a Following/For You tab bar, a side action rail (like/comment/save/share)…
• Phone split heroVelora UI · ReactApp launch hero with an email capture on the left and an app screen in an iPhone frame.
• X Post MockupReactFrame · ReactA realistic X (Twitter) post with a verified badge, media image, and interactive like/retweet/bookmark actions with…
• iPhone MockupVelora UI · ReactiPhone frame with dynamic island — pure CSS.
• Macbook ScrollVelora UI · ReactA CSS-drawn laptop pins in place and opens its lid as the screenshot scales up.

Libraries with mockup components

• Velora UI
• ReactFrame
• OpenSourceUI
• FLX UI
• Magic UI

Related categories

• React Mockup Components
• Tailwind CSS Mockup Components
• Animated Mockup Components
• shadcn/ui Mockup Components
• Media Components
• Icon Components
• Image Components
• Gallery Components
• Logo Components
• Illustration Components
• Animated Icon Components
• Audio Visualizer Components
• Scene 3D Components
• Video Player Components
• QR Code Components
• Icon Set Components
• Audio Player Components
• Image Zoom Components
• Image Compare Components
• Model Viewer Components