search

umbraco / Umbraco.UI

Umbraco UI Components
MIT License
109 stars 36 forks source link
components hacktoberfest ui ui-components umbraco umbraco-cms

readme

UI Library

Umbraco UI Library

Build Storybook GitHub license Twitter

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

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

See the rest of the scripts here.

Contributions