Panels · Components
Window
A window that drags, resizes, folds, maximizes and tiles, and works from the keyboard.
notes.md
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 by the title. Double-click it to maximize.
readme.md
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.Resize from any edge. Try Tab to the title, then the arrow keys.
$ pnpm dlx shadcn@latest add @nynxz/windowUsage
A Window renders the workspace window with the same id. It must sit inside a <Desktop>, which it's positioned against.
<Desktop className="h-96">
<Window id="notes" icon={<NoteIcon />}>
<Notes />
</Window>
</Desktop>Most apps don't render windows by hand: <AppWindows /> (see Desktop) renders one per open app.
Props
| Prop | Type | |
|---|---|---|
id | string | the window's id in the workspace |
icon | ReactNode | shown before the title |
actions | ReactNode | extra header controls, before minimize / fold / maximize / close |
features | WindowFeatures | switch behaviour off; see Window features |
className | string | merged onto the window's root |
Keyboard
The title bar is focusable (Tab to it). Screen readers announce these keys from its description.
| Keys | Does |
|---|---|
| arrows | move (Shift: bigger steps) |
| Alt + arrows | resize |
| Ctrl + ← / → | tile on that side |
| Ctrl + ↑ / ↓ | maximize · float or minimize |
| Escape | cancel a drag in progress |
Built from
useWindowFrame(id, features) from @nynxz/react-panels does the work: geometry, gestures, focus, the drop preview and keyboard. The component is markup and classes over it, so restyle freely.