Installation

This library requires Angular ^20.

There are four steps to installation:

Install the npm packages
Import the CSS
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";

If you're using Tailwind, import the theme CSS at the components layer instead:

@import "tailwindcss";

/* 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 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,
  },
]

4. 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"}),
  ],
}

Overview

Theming