UI Documentation

Find out more about Umbraco UI Library, UI API and Storybook.

UI Library and UI API

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.

Are you looking for the AngularJS documentation?

With Umbraco 14 the Umbraco backoffice has been rebuilt using Vite, Lit and Typescript. This means that AngularJS is no longer being used in Umbraco CMS, hence the removal of the corresponding documentation.

With the UI API, you get a set of collections related to modules export, interfaces, and hierarchy. This includes code examples and much more that you can use to extend the backoffice.

UI Icons

The icons from the Umbraco backoffice are based on Lucide Icons. The syntax for getting the icons starts withicon-. You can find the list of all icons in the Icon registry list on Github.

UI Library Storybook

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.

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.

Getting Started with the UI Library

The Storybook is the starting point for working with the Umbraco UI Library. The Storybook contains two tabs:

  1. Canvas - The Canvas tab allows to use the interactive controls.

  2. Docs - Here, you can find code examples for all the stories and use them in your markup. You can look it up by tag name or head to the project repository, where, in the packages folder, you will find all the component packages with all the necessary scripts and examples in the readme files.

Install the UI Library Components

You can download the UI Library package from Github.

If you are installing a component via npm, there are two ways to import it:

  1. To import a specific component and register it at the same time, use the following command:

import { UUIButtonElement } from '@umbraco-ui/uui-button';
  1. To build on top of the components functionality, you can extend its class:

import { UUIButtonElement } from '@umbraco-ui/uui-button/lib/uui-button.element';

For more information on installation, Content Delivery Networks (CDN), or included components, see theReadme file in the Githubproject.

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.

Last updated