Panels · Getting started
Introduction
A window manager for the web: floating, tiling and workspaces, built for React and keyboard first.
This site runs on it. The workspace you're in right now (the contents tile, this page, the taskbar, the slide to the next workspace) is the library.
It comes in two parts:
- An engine,
@nynxz/panels: plain TypeScript with no dependencies. Windows, focus and stacking, a tiling tree, drop targets and layout maths. Pure functions over plain state, so it's easy to test and runs anywhere. - Components: React hooks in
@nynxz/react-panels, and styled components you copy into your project with the shadcn CLI (@nynxz/window,@nynxz/desktop…). You own their markup and classes; the behaviour stays in the hooks.
What's in it
- Floating windows that drag, resize from any edge, fold, minimize and maximize.
- Tiling as a split tree: drop a window at an edge to split the tile there, drag the gutters between tiles, and watch the layout reflow before you let go.
- Workspaces that slide between each other, each keeping its windows.
- A taskbar, a command palette, and themes that are just CSS tokens.
- Bring your own store: keep window state in zustand, TanStack Store or anything with
getState/setState/subscribe. - Keyboard and screen-reader support throughout: every window, gutter and task is reachable without a mouse.
Where to start
Read Installation, then Apps to see how panels are declared. Tiling explains the layout model; the component pages each have a live example.