Umbraco UI Library

A collection of 80+ web components for building Umbraco CMS interfaces. Built with Lit and TypeScript. Browse them in the Storybook.

Installation

npm install @umbraco-ui/uui

Requirements: Node >= 24.13, npm >= 11. Runtime dependency: Lit ^3.0.0.

Quick start

Import only the components you need — your bundler will tree-shake the rest:

import '@umbraco-ui/uui/components/button/button.js';
import '@umbraco-ui/uui/components/input/input.js';

<uui-button look="primary" label="Save"></uui-button>
<uui-input label="Name"></uui-input>

Or register everything at once with import '@umbraco-ui/uui';.

Include a theme for CSS custom properties and typography:

<link
  rel="stylesheet"
  href="node_modules/@umbraco-ui/uui/dist/themes/light.css" />

Apply the uui-font and uui-text classes to the element that should carry UUI typography (typically <body>):

<body class="uui-font uui-text">
  ...
</body>

No bundler? Use UUI directly in the browser via import maps.

Components

80+ components across 13 categories: Buttons, Inputs, Color, Cards, Refs, Feedback, Layout, Forms, Navigation, Icons, Files, Symbols, and Data.

Each component has its own README in src/components/{name}/.

• Browse in Storybook
• Full component list

Documentation

See docs/ for the full documentation index.

Development

Setup

Requires Node.js >= 24.13 (see .nvmrc) and npm >= 11.

git clone https://github.com/umbraco/Umbraco.UI.git
cd Umbraco.UI
npm install

Key commands

| Command | Description | | ---------------------------------- | -------------------------------------------------- | | npm run storybook | Start Storybook dev server on port 6006 | | npm run build | Build the library (Vite + TypeScript declarations) | | npm run test | Run all tests with coverage | | npm run test:coverage-for button | Run tests for a single component | | npm run lint | Lint with ESLint | | npm run format | Auto-fix lint and formatting |

See docs/SCRIPTS.md for the full list.

Project structure

src/
├── internal/     # Mixins, events, types, registration
├── styles/       # CSS custom properties and text styles
├── themes/       # Light and dark theme CSS
├── components/   # 80+ component directories
└── index.ts      # Barrel — re-exports everything

Branching model

• main — development branch, PR target (storybook)
• production — published release, serves Storybook at uui.umbraco.com
• release/* — intermediary releases (RCs)

Contributing

Pull requests and stars are always welcome. Read the contributing guide to get started.

Report bugs and feature requests in the issue tracker.

License

MIT