The components are distributed like shadcn/ui's: the CLI copies their source into your project. They need a project already set up for shadcn (Tailwind v4 and a components.json).

1. Point the CLI at the registry

Add the @nynxz namespace to your components.json once:

{
  "registries": {
    "@nynxz": "https://nynxz.com/r/{name}.json"
  }
}

2. Add components

pnpm dlx shadcn@latest add @nynxz/window @nynxz/desktop @nynxz/taskbar

Each component installs @nynxz/react-panels (and through it @nynxz/panels) as a dependency, and lands in your components folder, ready to restyle.

3. Render a workspace

import { WindowManager, defineApp, workspaceWithApps } from "@nynxz/react-panels";
import { AppWindows, Desktop } from "@/components/desktop";
import { Taskbar } from "@/components/taskbar";

const apps = [
  defineApp({
    id: "notes",
    title: "notes",
    tile: { side: "left" },
    render: () => <Notes />,
  }),
  defineApp({
    id: "preview",
    title: "preview",
    tile: { of: "notes", side: "right" },
    render: () => <Preview />,
  }),
];

export function App() {
  return (
    <WindowManager
      apps={apps}
      defaultState={workspaceWithApps(apps, ["notes", "preview"])}
    >
      <div className="flex h-dvh flex-col">
        <Taskbar />
        <Desktop className="flex-1">
          <AppWindows />
        </Desktop>
      </div>
    </WindowManager>
  );
}

The components are written against shadcn's colour tokens (background, primary, border…), so they pick up your existing theme. See Theming for the extra tokens they read.