Window Frame Mockup React component
A desktop app window to put your product in: drag it around, resize it from the corner, zoom it with a double-click, and send it to the dock and back.
About the Window Frame Mockup component
Window Frame Mockup puts a screenshot or live demo inside a desktop app window, so it reads as real software rather than a flat picture.
Visitors can play with it too. They can move the window, resize it from the corner, double-click the title bar to zoom it, and minimise or close it to the dock and bring it back.
When to use it
Use it on landing pages, feature sections and docs that show a desktop product.
For a website, the browser mockup is the better fit, since it has tabs and an address bar.
Installation
Add the Window Frame Mockup component to your project with the shadcn CLI. It lands in components/window-frame-mockup.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/window-frame-mockupProps
<WindowFrameMockup /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Inbox" |
| controls Coloured dots on the left, or plain buttons on the right. | "dots" | "buttons" | "dots" |
| height Height of the desktop area, in pixels. | number | 520 |
| interactive Let people move and resize the window. | boolean | true |
| children What goes inside the window. Leave out for a sample app. | React.ReactNode | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Inbox"
- controls
Coloured dots on the left, or plain buttons on the right.
"dots" | "buttons"Default: "dots" - height
Height of the desktop area, in pixels.
numberDefault: 520 - interactive
Let people move and resize the window.
booleanDefault: true - children
What goes inside the window. Leave out for a sample app.
React.ReactNode
Collections
Use-case pages that compare Window Frame Mockup with the other components that do a similar job.
Window Frame Mockup FAQ
- What goes inside the window?
- Anything you pass as children: an image, a video or a live component.
- Can I turn off moving and resizing?
- Yes. Set interactive to false for a still frame.
- Does it work on a phone?
- Yes. Dragging works with touch, and positions are fractions, so it fits narrow screens.
- Can I use the keyboard?
- Yes. Focus the title bar and use the arrow keys to move it. Hold Shift for bigger steps.
