UI Library

A guide for getting started working with the Umbraco UI Library in Backoffice
This page is a work in progress. It has been migrated but the content is waiting to be updated for the new Backoffice.
The Umbraco UI Library is a set of web components that can be used to build Umbraco User Interfaces. The UI Library separates the user interface from Umbraco’s business logic and creates a unified user experience. This is done with coherent styling and naming, across all the Umbraco platforms and projects including the ones developed by you.
With the UI Library, you get a collection of visual building blocks that consists of pieces to build any UI in Umbraco. Each component is a building block updating its display according to the data passed to it.

UI Library Storybook

Storybook is an application that gathers all the components together of the UI Library. It holds the documentation for the components and showcases different use case scenarios. You can explore all the components through stories reflecting their use cases.
Each story has interactive controls that allow you to change the state of the component in real time. Every publicly available property is editable in Storybook, so you can test out custom configurations and use cases.
You can also change the stylesheet of custom properties to see how the component will look like. Every story has a code example that you can copy and paste into your project. This will allow you to implement the components in your own packages and extensions.

Import UI Library Components

You can also work with the components on a code level. If you want to do so here is how you import it:
import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';
This requires that your Package has the @umbraco-cms/backoffice dependency.
For more information on installation or included components, see the Readme file in the Github project.