Skip to content

bkclerke/Umbraco.UI

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

UI Library

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-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

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.

About

Umbraco UI Components

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 93.6%
  • JavaScript 3.6%
  • CSS 1.8%
  • MDX 0.4%
  • HTML 0.3%
  • Handlebars 0.3%