Tailwind CSS Window Frame Components

Dev Design Library indexes 29 Tailwind CSS window frame components from 17 open-source UI libraries, with the most coming from Toolcraft, Velora UI, ReactFrame, Notra and Opaline. 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. Window frame components belong to the Layout group.

• SafariMagic UI · ReactA safari browser mockup to showcase your website.
• Mock Browser WindowCult UI · ReactA customizable browser window mockup component with support for Chrome, Safari, and generic styles, customizable…
• Mac TerminalAmicro Micro Transitions · ReactMac Terminal loading animation.
• previewIntent UI · Reactpreview
• PanelToolcraft · React
• MockupLaunch UI · React
• Browser Mockup CardOpenSourceUI · React
• Web PreviewAI Elements (Svelte) · SvelteA browser-style preview frame with navigation controls and a log console.
• Claude Code TerminalNotra · ReactThe terminal window with traffic lights and a title bar for Claude Code sessions.
• Macbook MockupGreatUI · React
• Laptop MockupNexvyn UI · ReactA laptop device-frame illustration for showcasing app screens.
• Floating PanelShark UI · ReactDisplays content in a floating window.
• Browser MockupVelora UI · ReactBrowser window frame for product screenshots.
• FrameSpaceUI · ReactProvides a mock browser or device container to showcase components and design previews in context.
• Glass Code BlockOpaline · ReactSyntax-highlighted code in a glass window, with tabs, line numbers, highlighted lines and copy.
• Browser MockupReactFrame · ReactA realistic browser chrome frame in macOS, Windows, or mobile Safari style, with tabs, a URL bar, and a content area…
• Floating Panelark-cn · ReactA shadcn-style floating panel component built with Ark UI primitives.
• Panel ActionsToolcraft · React
• Codex TerminalNotra · ReactThe Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt.
• FrameShark UI · ReactBordered box for grouping related content.
• Alternating screenshot rowsVelora UI · ReactTwo alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped.
• Glass TerminalOpaline · ReactA macOS terminal on glass whose commands type themselves out, line by line, when scrolled into view.
• Desktop Mockup CarouselReactFrame · ReactA realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance…
• Panel HeaderToolcraft · React
• OpenCode WindowNotra · ReactThe OpenCode terminal surface that sets the background, monospace font and line grid.
• Product screenshot heroVelora UI · ReactCentered headline above a dashboard in a browser frame with a border beam and a logo row.
• TerminalReactFrame · ReactA macOS-style terminal window that types out a scripted sequence of commands, outputs and comments, with a blinking…
• Panel SectionToolcraft · React
• Panel SurfaceToolcraft · React

Libraries with Tailwind CSS window frame components

• Toolcraft
• Velora UI
• ReactFrame
• Notra
• Opaline

Related categories

• Window Frame Components
• React Window Frame Components
• Animated Window Frame Components
• shadcn/ui Window Frame Components
• Tailwind CSS Layout Components
• Tailwind CSS Grid Components
• Tailwind CSS Bento Grid Components
• Tailwind CSS App Shell Components
• Tailwind CSS Separator Components
• Tailwind CSS Stack Components
• Tailwind CSS Scroll Area Components
• Tailwind CSS Container Components
• Tailwind CSS Split Pane Components
• Tailwind CSS Aspect Ratio Components
• Tailwind CSS Sticky Scroll Components
• Tailwind CSS Masonry Components