Adding the toolkit

@gamedevland/cyber-ui draws panels, buttons, and icons in PixiJS Graphics objects. Core is enough for a regular Pixi project. We will use @gamedevland/cyber-ui-sdk later for components and actions in our SDK.

npm install pixi.js @gamedevland/cyber-ui

Let’s create an application in a TypeScript/Vite project and add a panel:

import { Application, Graphics } from 'pixi.js';
import { CyberPreset, TerminalGlass } from '@gamedevland/cyber-ui';

const app = new Application();
await app.init({ width: 480, height: 320, background: 0x07111d });
document.body.appendChild(app.canvas);

const panel = app.stage.addChild(new Graphics());
const t = CyberPreset.palette;
TerminalGlass.draw(panel, 24, 24, 432, 272, 12,
  t.panel, t.panelEdge, t.accent, t.text);

The panel uses vector geometry, so it needs no images. In the following examples, app refers to this application. In an SDK project, we use existing scene nodes instead of creating a second Application.

Development requires Node.js 22.12+. The packages are available on npm. To install a local build, run npm run pack in the toolkit repository and pass the resulting .tgz to npm install.