Window Mockup

A desktop window around any content, as a Mac window, a browser with tabs and an address bar, or a Windows window. It follows the light and dark theme.

Base UI React Aria Radix UI

October overview

vwork Digital, all amounts in CAD

Revenue: $38,420; Up12.4%
Expenses: $14,905; Up3.1%
Outstanding: $5,185; Down8.2%
Clients: 27; Up2 new

Recent invoices

Invoice	Client	Status	Amount
INV-1042	Fraser Valley Dental	Paid	$4,200.00
INV-1043	Harrison Hot Springs Inn	Sent	$1,850.00
INV-1044	Chilliwack Cycle Co.	Overdue	$960.00
INV-1045	Cultus Lake Rentals	Draft	$2,375.00

Spending, CAD

Software3,180
Contractors7,400
Travel1,290
Other3,035

Receipts

Q3 summary.pdf

Receipts

Adobe Oct.pdf

Receipts

Staples 0921.jpg

Receipts

Hosting Sept.pdf

Receipts

Fuel 1004.jpg

Receipts

Telus Oct.pdf

Receipts

Invoice INV-1044

Chilliwack Cycle Co.

Due 30 Sept 2026. 11 days overdue.

$960.00

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/window-mockup.json

Usage

import { WindowMockup } from "@/components/ui/window-mockup"

<WindowMockup title="Receipts" sidebar={<Folders />} toolbar={<Actions />}>
  <Files />
</WindowMockup>
 
<WindowMockup
  variant="browser"
  fit={1100}
  url="books.vwork.digital"
  tabs={[{ title: "Overview" }, { title: "Banking" }]}
>
  <Dashboard />
</WindowMockup>

Variants

mac. Traffic lights on the left and a centred title. The lights show their glyphs on hover.
browser. Traffic lights and tabs in one row, then back, forward, reload and the address bar. Tabs are buttons you can switch between.
windows. Icon and title on the left, minimise, maximise and close on the right.

Without fit, the window is fluid and its content reflows. With fit, the window renders at that width in pixels and scales down to fit narrow screens, so a desktop layout looks the same on a phone. The height follows the content.

The sidebar hides when the window is narrower than 36rem, so a fluid window still works at phone width.

Props

variant. mac, browser or windows.
title and icon. The window title. The icon shows in the Windows title bar.
actions. Small buttons on the right of the title bar.
toolbar and sidebar. Optional slots under the title bar and on the left of the content.
tabs, activeTab, defaultActiveTab and onActiveTabChange. Browser tabs, each with a title and an optional icon.
url and onNavigate. The address and a callback for back, forward and reload.
inactive. Greys out the traffic lights.
fit. Native width for scaling.
contentClassName. Classes for the content area.

Video Player Accordion

On This Page

Installation Usage Variants Fit Props