A collection of 80+ web components for building Umbraco CMS interfaces. Built with Lit and TypeScript. Browse them in the Storybook.
npm install @umbraco-ui/uuiRequirements: Node >= 24.13, npm >= 11. Runtime dependency: Lit ^3.0.0.
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.
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}/.
See docs/ for the full documentation index.
Requires Node.js >= 24.13 (see .nvmrc) and npm >= 11.
git clone https://github.com/umbraco/Umbraco.UI.git
cd Umbraco.UI
npm install| 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.
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
main— development branch, PR target (storybook)production— published release, serves Storybook at uui.umbraco.comrelease/*— intermediary releases (RCs)
Pull requests and stars are always welcome. Read the contributing guide to get started.
Report bugs and feature requests in the issue tracker.