Tailwind CSS Mockup Components

Dev Design Library indexes 49 Tailwind CSS mockup components from 17 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. Every library in this list styles its components with Tailwind CSS utility classes. 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 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.
• 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 Tailwind CSS mockup components

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

Related categories

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