Here are some useful resources:

• Full docs
• Github Repo
• Sandbox

We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!

Depending on your version of PixiJS, you'll need to figure out which major version of PixiUI to use.

npm install @pixi/ui

There is no default export. The correct way to import pixi-ui is:

import { Button } from '@pixi/ui';

const button = new Button();

button.onPress.connect(() => console.log('Button pressed!'));

The package is side-effect free ("sideEffects": false), so a bundler only includes the components you actually import from @pixi/ui. You can also import a component from its own entry point:

import { Button } from '@pixi/ui/Button';
import { ScrollBox } from '@pixi/ui/ScrollBox';
import { Input } from '@pixi/ui/input';
import { Signal } from '@pixi/ui/utils/Signal';

Subpath imports need a module resolution that understands package exports (node16, nodenext or bundler in TypeScript). With the legacy node (node10) resolution, import from @pixi/ui instead.

Every component is a separate ES module, so a browser can load just the ones you need with an import map:

<script type="importmap">
    {
        "imports": {
            "pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs",
            "tweedle.js": "https://cdn.jsdelivr.net/npm/tweedle.js@2/dist/tweedle.es.js",
            "@pixi/ui/": "https://cdn.jsdelivr.net/npm/@pixi/ui@2/lib/"
        }
    }
</script>
<script type="module">
    import { Input } from '@pixi/ui/input/Input.mjs';
</script>

For a classic <script> tag, dist/pixi-ui.js contains the whole library and only needs the PIXI global.

To use any of the components you can go to it's page in the sandbox, and copy/paste the example code to your project (check the Code tab):

• Switcher
• Button
• CheckBox
• FancyButton
• Input
• List
• MaskedFrame
• ProgressBar
• RadioGroup
• ScrollBox
• Select
• Slider

Want to be part of the PixiUI project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request, or you fancy owning a task from the road map above, feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

This content is released under the (http://opensource.org/licenses/MIT) MIT License.

This library requires Pixi v7.1.1 or higher as this is when the globalpointermove event was added See here for details