Installation

This library requires Angular ^20.

There are five quick steps to installation:

Install the npm packages
Import the CSS
Add the fonts
Add the theme provider
Inject the theme service

Soon we'll provide pre-built templates for quick starting new projects. For now, continue reading to learn how to install manually.

1. Install the npm packages

pnpm add @qualcomm-ui/angular @qualcomm-ui/angular-core @qualcomm-ui/core @qualcomm-ui/qds-core @qualcomm-ui/dom @qualcomm-ui/utils

npm i @qualcomm-ui/angular @qualcomm-ui/angular-core @qualcomm-ui/core @qualcomm-ui/qds-core @qualcomm-ui/dom @qualcomm-ui/utils

yarn add @qualcomm-ui/angular @qualcomm-ui/angular-core @qualcomm-ui/core @qualcomm-ui/qds-core @qualcomm-ui/dom @qualcomm-ui/utils

2. Import the CSS

In your application's global CSS file, import the QUI CSS for the theme you're targeting.

@import "@qualcomm-ui/qds-core/styles/components.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";

@import "tailwindcss";

/* Recommended: install and import @qualcomm-ui/tailwind-plugin */
@import "@qualcomm-ui/tailwind-plugin/qui-strict.css";

/* Important: always order these imports after the tailwindcss import */
@import "@qualcomm-ui/qds-core/styles/components.css" layer(components);
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css" layer(components);
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css" layer(components);

Learn more about the available themes in the theme documentation.

3. Add the fonts

QDS components are designed with the Roboto Flex and Roboto Mono font families. For best results, import these fonts in your application's index.html:

<!doctype html>
<html lang="en">
  <head>
    <!-- existing head content...  -->
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link href="https://fonts.gstatic.com" rel="preconnect" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,400..600&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400..500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

4. Add the theme provider

// app.config.ts
import {provideQdsTheme} from "@qualcomm-ui/angular/theme"

import {routes} from "./app.routes"

export const appConfig: ApplicationConfig = {
  providers: [
    // ... existing configuration
    provideQdsTheme(),
  ],
}

If using SSR, you'll need to opt into full server-side rendering (not pre-rendering) in your route config:

// app.routes.server.ts
import {RenderMode, ServerRoute} from "@angular/ssr"

export const serverRoutes: ServerRoute[] = [
  {
    path: "**",
    // this ensures that the cookie-based theme storage is available on the initial render.
    renderMode: RenderMode.Server,
  },
]

5. Inject the theme service

Inject QdsThemeService in your root component. This automatically applies the brand and theme data attributes to your application's root element.

// app.component.ts
import {Component, inject} from "@angular/core"
import {RouterOutlet} from "@angular/router"
import {QdsThemeService} from "@qualcomm-ui/angular/theme"

@Component({
  imports: [RouterOutlet],
  selector: "app-root",
  template: `
    <router-outlet />
  `,
})
export class App {
  protected readonly themeService = inject(QdsThemeService)
}

Your application is now ready to import and use our components.

Next Steps

Learn more about theming in our theming documentation.
Use the navigation menu on the left to view component documentation.

(Optional) Customize the default theme

The default theme is a dark theme with Qualcomm brand colors.

You can customize these defaults by overriding them in your application's provider configuration. Note that this will only affect users that have not already visited your site.

// app.config.ts
import {provideQdsTheme} from "@qualcomm-ui/angular/theme"

import {routes} from "./app.routes"

export const appConfig: ApplicationConfig = {
  providers: [
    // ... existing configuration
    provideQdsTheme({defaultTheme: "light", defaultBrand: "snapdragon"}),
  ],
}

Troubleshooting

Styles aren't loading

If @qualcomm-ui/angular components are appearing without styles, check the following:

Ensure that you've imported the CSS from step 2.
Verify that you've added the theme provider from step 4.
Verify that you've injected the theme service from step 5.

If styles still aren't appearing, inspect the DOM of your application in your browser's dev tools. Your application's <html> element should have at least two attributes:

data-brand: the QDS brand (either qualcomm, snapdragon, or dragonwing)
data-theme: the QDS theme (either light or dark)

Your <html> element should look something like this:

<html
  data-brand="qualcomm"
  data-theme="light"
  style="color-scheme: light"
></html>

Note that you need to import the corresponding CSS for the brand you've selected:

@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";

@import "@qualcomm-ui/qds-core/themes/snapdragon-dark.css";
@import "@qualcomm-ui/qds-core/themes/snapdragon-light.css";

@import "@qualcomm-ui/qds-core/themes/dragonwing-dark.css";
@import "@qualcomm-ui/qds-core/themes/dragonwing-light.css";

Component Styles

Always import component styles, regardless of the chosen brand.

@import "@qualcomm-ui/qds-core/styles/components.css";

Migrating from legacy QUI

NextGen is independent of the legacy @qui/angular package. Both can be installed and used in the same project without conflicts.

/* this is fine */
@import "@qui/styles/dist/all.min.css";
@import "@qui/base/dist/all.min.css";

@import "@qualcomm-ui/qds-core/styles/components.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-dark.css";
@import "@qualcomm-ui/qds-core/themes/qualcomm-light.css";

NOTE

We're working on a codemod script to automate the migration process. Check back regularly for updates!

ESLint

Integrations