Fully Styled UI Component Library – PCUI

Category: Frameworks , Javascript | December 22, 2022
Views Total:206 views
Official Page:Go to website
Last Update:December 22, 2022


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:

  • ArrayInput
  • BooleanInput
  • Button
  • Code
  • Container
  • ContextMenu
  • Divider
  • InfoBox
  • Label
  • NumericInput
  • Overlay
  • Panel
  • Progress
  • SelectInput
  • SliderInput
  • Spinner
  • TextAreaInput
  • TextInput
  • TreeView
  • VectorInput

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



v3.0.0 (12/20/2022)

  • [Major breaking change] PCUI build updates
  • Menu component updates
  • Enable more Stylelint rules
  • MenuItem select event

v2.10.0 (12/20/2022)

  • General Typing Improvements
  • Remove the ContextMenu component
  • Remove TypeScript namespaces from the codebase
  • Enable Stylelint to lint SCSS files

v2.9.0 (12/17/2022)

  • [Breaking] Numeric input to use shift for precision when using arrow keys or dragging
  • Migrate PCUI to TypeScript

v2.8.0 (10/15/2022)

  • update

v2.7.1 (10/03/2022)

  • update

v2.7.0 (09/30/2022)

  • added color picker, gradient picker and canvas
  • added themes

v2.6.4 (09/06/2022)

  • TreeView react component fix

v2.6.3 (09/05/2022)

  • Component Event Updates

v2.6.2 (09/05/2022)

  • Adds 10 New Icons to the Font Sheet

v2.6.1 (08/19/2022)

  • Element class property

v2.6.0 (07/29/2022)

  • Embedded font icons

v2.5.0 (07/23/2022)

  • Set selected from passed in args on TreeViewItem
  • Update how styles are included in the project
  • Bug Fixes

v2.4.0 (07/12/2022)

  • Adds RadioButton component
  • Tweaks GridView and GridViewItem components to incorporate Radio selection logic

v2.3.3 (06/14/2022)

  • bugfix

v2.3.2 (06/11/2022)

  • updates to labelgroup and panel
  • dependencies updated
  • Add an icon property to the TreeViewItem class

v2.3.1 (03/05/2022)

  • bugfix

v2.3.0 (02/12/2022)

  • Updated the build process and npm build

v2.2.6 (12/02/2021)

  • Disable auto complete on input fields

v2.2.5 (11/06/2021)

  • Upgrades some deprecated or old packages that prevented pcui from building

v2.2.4 (10/14/2021)

  • Fire change event when ESC is pressed in TextInput with keyChange = true. Make ESC clear the input even when blurOnEscape is false.

v2.2.3 (10/13/2021)

  • Fix bug where clicking on disabled menuitem would trigger click on its parent menu item.

v2.2.2 (10/12/2021)

  • Fix transition when menu items are enabled / disabled

v2.2.1 (10/12/2021)

  • Alt click on TreeViewItem to open / close all its children as well

v2.2.0 (10/12/2021)

  • Added new Menu and MenuItem components

v2.1.4 (09/15/2021)

  • Fixes for drag-scrolling near edges of TreeView

v2.1.3 (09/09/2021)

  • Fix various issues when reparenting or reordering multiple tree view items together.

v2.1.2 (09/08/2021)

  • Allow root node of TreeView to be dragged

v2.1.1 (09/01/2021)

  • Added #ifndef #endif statements for import statements of individual scss files so that they can be removed when clean-css runs.

v2.1.0 (08/31/2021)

  • Now using rollup instead of webpack, Removed components and binding folders and put everything under root folder.

v2.0.0 (08/27/2021)

  • Remove pcui-binding namespace and move its contents into the main namespace.

v1.1.23 (08/19/2021)

  • Update observer and observer-list to latest Editor version
  • Add Events#addEmitter and Events#removeEmitter

v1.1.22 (06/17/2021)

  • Update

v1.1.21 (06/11/2021)

  • First select the treeview item and open its parents before focusing on it
  • [TextInput] Revert to previous value on esc key press

v1.1.20 (06/01/2021)

  • Fix error with undefined values in VectorInput

v1.1.19 (05/19/2021)

  • Small context menu bugfix

v1.1.18 (05/15/2021)

  • NPM build fix for 1.1.17

v1.1.17 (05/10/2021)

  • If ArrayInput value is not an array set value to empty array instead

v1.1.16 (05/06/2021)

  • Updated package

v1.1.15 (03/24/2021)

  • Update the dom hierarchy when the treeview receives new props
  • TreeViewItem selected react
  • Remove dummy text from the label components default text property
  • Vector input string value

v1.1.14 (03/19/2021)

  • When filtering SelectInput options, reorder them based on their best match

v1.1.13 (02/26/2021)

  • Fix numeric inputs not using precision when viewing multiple values

v1.1.12 (02/22/2021)

  • Do not manually call removeChild for elements with destroyed parent

v1.1.11 (02/16/2021)

  • Fix for numeric input slider resetting input on mouse up

v1.1.10 (02/15/2021)

  • Fix flex of array input items but use special condition for panel headers so that they don’t appear squished when collapsed.
  • Add newChildIndex to the reparent function of TreeViews
  • Added LabelGroup
  • Added GridView
  • Fix error when clearing resizable container

v1.1.9 (02/13/2021)

  • Expose LabelGroup

v1.1.6 (01/28/2021)

  • Fix flex of array input items

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