Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA desktop area with draggable, resizable windows that raise on focus, zoom on double-click and minimize into a tray.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import {
WindowManager,
type ManagedWindow,
} from "@/components/ui/window-manager"const [windows, setWindows] = React.useState<ManagedWindow[]>([
{ id: "notes", title: "Notes", content: <div className="p-4">Hello</div> },
])
<WindowManager
windows={windows}
onClose={(id) => setWindows((w) => w.filter((x) => x.id !== id))}
className="h-96"
/>| Prop | Type | Default | Description |
|---|---|---|---|
windows | ManagedWindow[] | - | The windows. Add an entry to open one; remove it to close it. |
onClose | (id: string) => void | - | Called by a window's close button. |
children | React.ReactNode | - | Content behind the windows, such as desktop icons. |
label | string | "Desktop" | Accessible name of the desktop. |
trayLabel | string | "Minimized windows" | Accessible name of the minimized-window tray. |
Also accepts all <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique id. |
title | string | - | Title in the title bar and tray. |
content | React.ReactNode | - | What the window shows. |
x | number | cascade | Left edge in px. |
y | number | cascade | Top edge in px. |
width | number | 380 | Width in px. |
height | number | 250 | Height in px. |
minWidth | number | 220 | Smallest resize width. |
minHeight | number | 140 | Smallest resize height. |