Window Mockups

CSS-only browser, desktop, and terminal window frames for showcasing apps, websites, and code.

Browser Window

https://zeroui.dev

Your Website

1import { BrowserMockup } from "@/zeroui/components/mockups";
2
3export default function Example() {

Browser Styles

chrome://newtab

Chrome

https://apple.com

Safari

https://arc.net

Arc

about:newtab

Firefox

1<BrowserMockup style="chrome" />
2<BrowserMockup style="safari" />
3<BrowserMockup style="arc" />

Browser Props

Props

name	type	default	description
children	ReactNode	-	-
style	"chrome" \| "safari" \| "arc" \| "firefox"	"chrome"	-
url	string	"https://example.com"	-
scale	number	1	-
className	string	""	-
contentClassName	string	""	-
showControls	boolean	true	-

Desktop Window

My App

App Content

1import { WindowMockup } from "@/zeroui/components/mockups";
2
3export default function Example() {

Window Styles

Finder

macOS

Explorer

Windows

Files

Linux

Linux (GNOME)

1<WindowMockup style="macos" />
2<WindowMockup style="windows" />
3<WindowMockup style="linux" />

Window Props

Props

name	type	default	description
children	ReactNode	-	-
style	"macos" \| "windows" \| "linux"	"macos"	-
title	string	"Untitled"	-
scale	number	1	-
className	string	""	-
contentClassName	string	""	-
showControls	boolean	true	-

Terminal Window

Terminal

$ npm install zeroui

added 42 packages in 2.3s

$ _

1import { TerminalMockup } from "@/zeroui/components/mockups";
2
3export default function Example() {

Terminal Styles

Terminal

$ echo "Hello"

macOS Terminal

Terminal

user@ubuntu:~$ ls -la

Ubuntu

PowerShell

PS C:\> Get-Process

PowerShell

Terminal

~ npm run dev

VS Code

1<TerminalMockup style="macos" />
2<TerminalMockup style="ubuntu" />
3<TerminalMockup style="powershell" />

Color Themes

Dark

$ vim config.js

Dark

Dracula

$ vim config.js

Dracula

Monokai

$ vim config.js

Monokai

Nord

$ vim config.js

Nord

1<TerminalMockup color="dark" />
2<TerminalMockup color="dracula" />
3<TerminalMockup color="monokai" />

Terminal Props

Props

name	type	default	description
children	ReactNode	-	-
style	"macos" \| "ubuntu" \| "powershell" \| "vscode"	"macos"	-
color	"dark" \| "light" \| "dracula" \| "monokai" \| "nord"	"dark"	-
title	string	"Terminal"	-
scale	number	1	-
className	string	""	-
contentClassName	string	""	-
showControls	boolean	true	-