Window Frame Components

Dev Design Library indexes 32 window frame components from 20 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. Window frame components belong to the Layout group.

• Floating PanelChakra UI · ReactUsed to render a draggable, resizable panel that floats above the page content.
• 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…
• Floating PanelArk UI · ReactUsed to display content in a non-modal floating window.
• 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.
• Browser FrameHalaska UI · React
• 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 window frame components

• Toolcraft
• Velora UI
• ReactFrame
• Notra
• Opaline

Related categories

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