The design system ships as a family of NPM packages hosted on the GitHub Package Registry. Pick the package that matches your framework, add the registry configuration once, and you're ready to build.

All packages support the UL Solutions and ULTRUS brands via separate CSS themes.

The Angular and React packages are thin, idiomatic wrappers around the web components — they expose the same components with proper TypeScript types and framework-native integration. The web-components package is the foundation and works in any environment.

All packages are published to the GitHub Package Registry under the @underwriters-labs scope. You need to tell NPM/Yarn/PNPM to route that scope to the right registry.

Add a .npmrc file to the root of your project (or to your user home directory):

@underwriters-labs:registry=https://npm.pkg.github.com
      //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
      

Replace YOUR_GITHUB_TOKEN with a GitHub personal access token that has read:packages scope. You can create one at github.com/settings/tokens.

Note: Do not commit the token to source control. Use an environment variable (${GITHUB_TOKEN}) or your CI/CD secrets store instead.

The foundational styles package. Provides compiled CSS, the raw SCSS source, fonts, and design tokens. Every other package depends on this one.

npm install @underwriters-labs/design-system
      

• NPM package
• Storybook — component demos with HTML/CSS markup
• GitHub repository

Framework-agnostic components built with Stencil.js. These are custom elements that work anywhere a browser does — Angular, React, Vue, Svelte, plain HTML, or server-rendered pages.

npm install @underwriters-labs/design-system-web-components
      

• NPM package
• GitHub repository

Use this if your project is on Angular 18 or below. Components are exposed as Angular standalone components with full TypeScript types and Angular-idiomatic inputs/outputs.

npm install @underwriters-labs/design-system-angular18
      

• NPM package
• GitHub repository

If you later upgrade to Angular 19+, swap the package name to @underwriters-labs/design-system-angular19 — the API surface is identical.

Use this if your project is on Angular 19 or above. Same components and API as the Angular 18 package; generated with the Angular 19-compatible Stencil output target.

npm install @underwriters-labs/design-system-angular19
      

• NPM package
• GitHub repository

Idiomatic React components with TypeScript types. Compatible with React 17, 18, and 19.

npm install @underwriters-labs/design-system-react19
      

• NPM package
• GitHub repository

The CSS package ships two theme files — one per brand. Import the one that matches your product:

/* UL Solutions brand */
      @import "@underwriters-labs/design-system/dist/ul-solutions.css";
      
      /* ULTRUS brand */
      @import "@underwriters-labs/design-system/dist/ultrus.css";
      

Only import one theme. Importing both will result in conflicting custom property definitions.

Version 2 is no longer being developed. It supports the UL Solutions brand only and provides CSS/SCSS without web components. It is listed here for reference for teams still on it.

• NPM package
• Storybook demo site
• GitHub repository

If you can't access the NPM package or the GitHub repo then you probably don't have your GitHub account linked to the UL organisation (@underwriters-labs) yet. [Email us to get access](mailto:LST.UL.DesignSystem@ul.com?subject=Request access - GitHub ui team).