Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/umbraco/Umbraco.UI

Umbraco UI Components
https://github.com/umbraco/Umbraco.UI
components hacktoberfest ui ui-components umbraco umbraco-cms
Last synced: 3 months ago
JSON representation
Umbraco UI Components
Host: GitHub
URL: https://github.com/umbraco/Umbraco.UI
Owner: umbraco
License: mit
Created: 2020-11-25T07:48:32.000Z (almost 4 years ago)
Default Branch: v1/contrib
Last Pushed: 2024-04-12T07:01:38.000Z (7 months ago)
Last Synced: 2024-04-12T16:34:47.780Z (7 months ago)
Topics: components, hacktoberfest, ui, ui-components, umbraco, umbraco-cms
Language: TypeScript
Homepage:
Size: 43 MB
Stars: 104
Watchers: 12
Forks: 31
Open Issues: 30
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project

awesome-lit - Umbraco UI Components - Collection of user interface web components for Umbraco CMS. (Component Libraries)
awesome-web-components - Umbraco UI Components - Collection of user interface web components for Umbraco CMS. (Real World / Component Libraries)
README

        ![UI Library](docs/images/UI.png)

# [Umbraco UI Library](https://uui.umbraco.com/)

[![Build](https://github.com/umbraco/Umbraco.UI/actions/workflows/tests.yml/badge.svg)](https://github.com/umbraco/Umbraco.UI/actions/workflows/tests.yml) [![Storybook](https://github.com/umbraco/Umbraco.UI/actions/workflows/azure-static-web-apps-delightful-beach-055ecb503.yml/badge.svg)](https://github.com/umbraco/Umbraco.UI/actions/workflows/azure-static-web-apps-delightful-beach-055ecb503.yml) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](../LICENSE.md) [![Twitter](https://img.shields.io/twitter/follow/umbraco.svg?style=social&label=Follow)](https://twitter.com/intent/follow?screen_name=umbraco)

This is a UI-library for [Umbraco CMS](https://umbraco.com/) 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](https://lit.dev/) and are meant to be displayed with [UI Library Storybook](https://uui.umbraco.com/).

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"](#get-started) section.

## Components

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

| Status                                                                                                                                                                              | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui)                                                           | kages/uui-css)                                      | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-css?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-css)                                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-action-bar?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-action-bar)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-avatar?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-avatar)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-avatar-group?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-avatar-group)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-badge?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-badge)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-base?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-base)                                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-boolean-input?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-boolean-input)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-box?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-box)                                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-breadcrumbs?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-breadcrumbs)                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-button?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-button)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-button-group?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-button-group)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-button-inline-create?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-button-inline-create)                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-card)                                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-content-node?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-card-content-node)                       | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-media?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-card-media)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-user?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-card-user)                                       | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-caret?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-caret)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-checkbox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-checkbox)                                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-area?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-area)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-picker?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-picker)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-slider?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-slider)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatch?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-swatch)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatches?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-swatches)                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox)                                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox-list?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox-list)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-dialog?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-dialog)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-dialog-layout?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-dialog-layout)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-file-dropzone?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-file-dropzone)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-file-preview?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-file-preview)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-form?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-form)                                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-form-layout-item?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-form-layout-item)                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-form-validation-message?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-form-validation-message)           | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-icon?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-icon)                                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-icon-registry?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-icon-registry)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-icon-registry-essential?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-icon-registry-essential)           | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-input?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-input)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-input-file?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-input-file)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-input-lock?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-input-lock)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-input-password?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-input-password)                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-keyboard-shortcut?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-keyboard-shortcut)                       | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-label?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-label)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-loader?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-loader)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-loader-bar?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-loader-bar)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-loader-circle?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-loader-circle)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-menu-item?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-menu-item)                                       | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-modal?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-modal)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-pagination?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-pagination)                                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-popover?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-popover)                                           | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-popover-container?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-popover-container)                       | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-progress-bar?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-progress-bar)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-range-slider?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-range-slider)                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-radio?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-radio)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref)                                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-list?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-list)                                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node)                                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node-data-type?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node-data-type)                     | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node-document-type?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node-document-type)             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node-form?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node-form)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node-member?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node-member)                           | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node-package?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node-package)                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-ref-node-user?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-ref-node-user)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-scroll-container?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-scroll-container)                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-select?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-select)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-slider?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-slider)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-expand?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-expand)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-file?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-file)                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-file-dropzone?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-file-dropzone)                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-file-thumbnail?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-file-thumbnail)               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-folder?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-folder)                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-lock?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-lock)                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-more?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-more)                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-sort?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-symbol-sort)                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-table?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-table)                                               | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-tabs?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-tabs)                                                 | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-tag?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-tag)                                                   | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-textarea?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-textarea)                                         | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-toast-notification?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-toast-notification)                     | cation-container) | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-toast-notification-container?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-toast-notification-container) | cation-layout)       | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-toast-notification-layout?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-toast-notification-layout)       | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-toggle?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-toggle)                                             | | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-visually-hidden?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/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](https://nodejs.org/en/). The UI Library requires npm in version 7 or higher, due to the use of npm workspaces.

```sh

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.

```sh

npm run storybook

```

### Run tests

This command will build the project and run tests.

```sh

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](docs/SCRIPTS.md).

## Contributions

- 📥 Pull requests and 🌟 Stars are always welcome.

- Read our [contributing guide](docs/CONTRIBUTING.md) to get started.

- Please report bugs and feature requests in the [issue tracker](https://github.com/umbraco/Umbraco.UI/issues)

- 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](https://delightful-beach-055ecb503-v1contrib.westeurope.azurestaticapps.net/)