This Develop menu is primarily documentation to create new web components using CLI.

To simply use UUX Web Components in your webpage, look at the demo pages here

This guide will help you get started with Unified UX as quickly as possible. It assumes a basic understanding of JavaScript development and some experience with NPM or Yarn.

The Unified UX CLI is a command-line utility for creating, managing, and building Unified UX projects and components.

Before installing the CLI, ensure that the latest Node.js LTS version is installed on your system.

For UNIX based systems, make sure you are logged in as a user with sudo privileges.

You can view how to install Node on Linux and other operating systems via a package manager here.

Once installed, we recommend using yarn package manager. You can install it via npm:

npm install -g yarn

Then run the following command:

npm install -g @unified-ux/cli

This command will install the Unified UX CLI from the NPM repository. When it's installed, the uux command will be available via the command line. We'll use this command to create and manage our project.

To create an Unified UX library, run the following command:

uux generate library quick-start-example

But replace "quick-start-example" with the name of your library.

This will generate a project that contains all the scripts necessary to develop, test and build your web components.

To see your components, navigate into the project's directory:

cd quick-start-example

Then run the storybook command:

yarn storybook

A local server will launch that makes a storybook preview available at http://localhost:6006. This preview should automatically open in your default browser and refresh when changes are made.

This introduction to Unified UX has only been the tip of the iceberg. To discover the extent of what's possible, we recommend the following:

  1. Dive head-first into the source code of your first component.
  2. Read through the API documentation for the LitElement and LitHtml libraries.
  3. Try creating your own components and adding test cases for them.
  4. Build your components to Visualizer.

You can, however, also expect to find more documentation here in the coming weeks and months, so check back regularly for further code samples and tutorials.