Fully Styled UI Component Library – PCUI

Category: Frameworks , Javascript | January 5, 2021
Author: playcanvas
Views Total: 23 views
Official Page: Go to website
Last Update: January 5, 2021
License: MIT


Fully Styled UI Component Library – PCUI


PCUI is a fully styled UI component library for Vanilla JavaScript and React apps.

It provides a quick and stylish way to create reusable UI components in modern web & mobile design.

UI Components Included:

  • Boolean Input
  • Button
  • Code
  • Container
  • Divider
  • InfoBox
  • Label
  • Numeric Input
  • Overlay
  • Panel
  • Progress
  • Select Input
  • Slider Input
  • Spinner
  • TextArea Input
  • Text Input
  • TreeView
  • Vector Input

Basic Usage:

1. Install the PCUI package with NPM.

$ npm i @playcanvas/pcui --save

2. Import UI components.

// Vanilla JavaScript
import { Component } from '@playcanvas/pcui/pcui.js';

// React
import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from '@playcanvas/pcui/pcui-react.js';

// Data binding
import {
} from '@playcanvas/pcui/pcui-binding.js';

3. Use these UI components in your app.

<BooleanInput onChange={function noRefCheck(){}} />


PCUI UI Component Boolean Input

Boolean Input

PCUI UI Component Info Box

Info Box

PCUI UI Component Panel


PCUI UI Component Tree View

Tree View

PCUI UI Component Textarea



v1.1.5 (01/05/2021)

  • Removed the montserrat font from the PCUI build. Custom font’s can now be included via the font css classes

v1.1.4 (12/23/2020)

  • Change how history combine works for NumericInput and SliderInput
  • Change SliderInput handle behavior which fixes an undo / redo bug and removes the accumulator logic in favor of allowing a small initial offset between the cursor and the handle.

v1.1.3 (12/21/2020)

  • Fix subarray panels

v1.1.2 (12/21/2020)

  • Various fixes to ArrayInput
  • Use Element.register for all components
  • Fix defaults for TreeView storybook

v1.1.1 (12/18/2020)

  • Initialize Container values that default to false so that we avoid an unnecessary property setter for scrollable, flex, grid properties

v1.1.0 (12/17/2020)

  • Support for the TreeView and TreeViewItem components
  • Support for the ArrayInput component
  • The TextAreaInput component can now be set to resizable
  • Fixed references to the BindingObserversToElement and BindingElementToObservers classes
  • The ContextMenu now exposes its trigger element
  • Fixed the handle position

v1.0.8 (12/16/2020)

  • Fix the handle position

v1.0.8 (11/12/2020)

  • Fix slider handle on zero

v1.0.5 (10/31/2020)

  • Include pcui-hidden in pcui-react build

v1.0.4 (10/29/2020)

  • update the default numeric input precision to 7

v1.0.3 (10/26/2020)

  • Expose the ContextMenu component

You Might Be Interested In:

Leave a Reply