Umbraco UI Library

This is a UI-library for Umbraco CMS and friends. It is a collection of user interface components that can be used to build Umbraco style interfaces.

The elements are web components built with Lit and are meant to be displayed with UI Library Storybook.

The Storybook is also a development environment for the components.

If you want to use a component in your project find it in the table below and follow the instructions from components readme.

If you want to develop a component or contribute to the repository go to "Get started" section.

Components

Component	Status
uui bundle package
uui-css bundle package
<uui-action-bar>
<uui-avatar>
<uui-avatar-group>
<uui-badge>
<uui-base>
<uui-boolean-input>
<uui-box>
<uui-breadcrumbs>
<uui-button>
<uui-button-group>
<uui-button-inline-create>
<uui-card>
<uui-card-content-node>
<uui-card-media>
<uui-card-user>
<uui-caret>
<uui-checkbox>
<uui-color-area>
<uui-color-picker>
<uui-color-slider>
<uui-color-swatch>
<uui-color-swatches>
<uui-combobox>
<uui-combobox-list>
<uui-dialog>
<uui-dialog-layout>
<uui-file-dropzone>
<uui-file-preview>
<uui-form>
<uui-form-layout-item>
<uui-form-validation-message>
<uui-icon>
<uui-icon-registry>
<uui-icon-registry-essential>
<uui-input>
<uui-input-file>
<uui-input-lock>
<uui-input-password>
<uui-keyboard-shortcut>
<uui-label>
<uui-loader>
<uui-loader-bar>
<uui-loader-circle>
<uui-menu-item>
<uui-modal>
<uui-pagination>
<uui-popover>
<uui-popover-container>
<uui-progress-bar>
<uui-range-slider>
<uui-radio>
<uui-ref>
<uui-ref-list>
<uui-ref-node>
<uui-ref-node-data-type>
<uui-ref-node-document-type>
<uui-ref-node-form>
<uui-ref-node-member>
<uui-ref-node-package>
<uui-ref-node-user>
<uui-scroll-container>
<uui-select>
<uui-slider>
<uui-symbol-expand>
<uui-symbol-file>
<uui-symbol-file-dropzone>
<uui-symbol-file-thumbnail>
<uui-symbol-folder>
<uui-symbol-lock>
<uui-symbol-more>
<uui-symbol-sort>
<uui-table>
<uui-tabs>
<uui-tag>
<uui-textarea>
<uui-toast-notification>
<uui-toast-notification-container>
<uui-toast-notification-layout>
<uui-toggle>
<uui-visually-hidden>

Get started

Installation

This project uses nodejs, so you should install nodejs as the package manager on your machine. See installation guide. The UI Library requires npm in version 7 or higher, due to the use of npm workspaces.

git clone https://github.com/umbraco/Umbraco.UI.git
cd .\Umbraco.UI\
npm install

Run storybook

This command will start a server running storybook and watch for changes.

npm run storybook

Run tests

This command will build the project and run tests.

npm run test

Scripts overview

• storybook opens storybook for the elements
• storybook:analyze generate or update custom-elements.json file
• test runs your test suite with Web Test Runner
• format runs linter and autoformatter

See the rest of the scripts here.

Contributions

• 📥 Pull requests and 🌟 Stars are always welcome.
• Read our contributing guide to get started.
• Please report bugs and feature requests in the [issue tracker](
• The main branch is the latest development branch. Please make your pull requests against this branch: v1/contrib
  • You can see the latest features in the Storybook attached to this branch: v1/contrib