Panels · Components
Desktop
The area windows live in: tracks its size, draws the tiling gutters, renders open apps.
one
Arrow keys move the window, Alt with arrows resizes it, Shift takes bigger steps. Control with left or right tiles it on that side, with up maximizes, with down returns it to floating or minimizes. While dragging, drop at a screen edge to tile, or hold Shift to split the window underneath.Drag a gutter to resize.
two
Arrow keys move the window, Alt with arrows resizes it, Shift takes bigger steps. Control with left or right tiles it on that side, with up maximizes, with down returns it to floating or minimizes. While dragging, drop at a screen edge to tile, or hold Shift to split the window underneath.Drag the square where gutters meet.
three
Arrow keys move the window, Alt with arrows resizes it, Shift takes bigger steps. Control with left or right tiles it on that side, with up maximizes, with down returns it to floating or minimizes. While dragging, drop at a screen edge to tile, or hold Shift to split the window underneath.Drag me out, then back to an edge.
$ pnpm dlx shadcn@latest add @nynxz/desktopUsage
Give the desktop a size; the workspace's bounds follow it as it resizes. It also draws the draggable gutters between tiles and the junctions where they meet.
<Desktop className="flex-1">
<AppWindows />
</Desktop>AppWindows renders a Window for every open window that belongs to a registered app, with the app's icon and features, so the desktop needs no per-app markup.
Props
| Prop | Type | |
|---|---|---|
brackets | boolean | draw corner brackets (default true) |
className | string | size it here |
First paint
Until the desktop has measured itself, windows don't animate, and tiled ones are positioned as CSS proportions of it, so pre-rendered HTML is already right at the visitor's screen size. Nothing slides into place on load.