Fully Styled UI Component Library – PCUI

Category: Frameworks , Javascript | March 24, 2021
Author: playcanvas
Views Total: 38 views
Official Page: Go to website
Last Update: March 24, 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.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