Installation

Setting up Optimus UI in an Angular CLI project.

Prerequisites #

Optimus UI targets Angular v21 and newer. Any workspace created with the Angular CLI works, standalone or NgModule based.

Angular v21 or newer, including @angular/cdk, @angular/forms and @angular/router
RxJS v7.8.1 or newer
A package manager of your choice — npm, yarn or pnpm

Already using PrimeNG? Do not follow this page. The migration guide covers moving an existing PrimeNG v21 workspace across, and the same ng add command detects that case for you.

Install #

The recommended way to add Optimus UI to an Angular CLI workspace is a single command.

ng add @openng/optimus-ui

The schematic asks which theme preset you want and then does the rest:

adds @openng/optimus-ui and @openng/optimus-ui-themes to your dependencies
wires provideOptimus into your root providers with the chosen preset, in app.config.ts or your root NgModule
installs the packages

Pass the preset up front to skip the prompt, or skip the install step if you want to run it yourself:

# Choose the preset without the prompt — Aura, Lara, Material or Nora
ng add @openng/optimus-ui --theme=Lara

# Wire everything up but do not run the package install
ng add @openng/optimus-ui --skip-install

# Target a specific project in a multi-project workspace
ng add @openng/optimus-ui --project=admin

If the schematic cannot find a providers array to update it prints the three manual steps instead of guessing, so nothing in your workspace is rewritten unexpectedly. If it detects an existing primeng dependency it makes no changes at all and points you at the migration guide, which covers the migrate-from-primeng schematic.

Manual Setup #

Download #

Prefer to wire things up yourself? Install the packages from the npm registry directly. The next section covers the provider setup that ng add would have written for you.

# Using npm
npm install @openng/optimus-ui @openng/optimus-ui-themes

# Using yarn
yarn add @openng/optimus-ui @openng/optimus-ui-themes

# Using pnpm
pnpm add @openng/optimus-ui @openng/optimus-ui-themes

Provider #

Add provideOptimus to the list of providers in your app.config.ts and use the theme property to configure a theme such as Aura.

import { ApplicationConfig } from '@angular/core';
import { provideOptimus } from '@openng/optimus-ui/config';
import Aura from '@openng/optimus-ui-themes/aura';

export const appConfig: ApplicationConfig = {
    providers: [
        provideOptimus({
            theme: {
                preset: Aura
            }
        })
    ]
};

Icons #

Optimus UI components accept any icon through templating, so an icon library is optional. That said, every example in this documentation uses the pi pi-{icon} classes from OpenNG Icons, and component defaults such as the DatePicker arrows reference them too. Install it if you want the demos to look the way they do here.

npm install @openng/icons

Then import the stylesheet, either from your global stylesheet or from the styles array in angular.json.

@import "@openng/icons/openng-icons.css";

Verify #

Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.

import { Component } from '@angular/core';
import { ButtonModule } from '@openng/optimus-ui/button';

@Component({
    selector: 'button-demo',
    templateUrl: './button-demo.html',
    imports: [ButtonModule]
})
export class ButtonDemo {}

<p-button label="Check" />

Examples #

Every example in this documentation opens in StackBlitz from the code toolbar above each demo, already wired up with the current version. The source repository is the reference for how the library itself is built and consumed.

Next Steps #

Once you have Optimus UI up and running, we recommend exploring the following resources to gain a deeper understanding of the library.

Global configuration
Styled mode and unstyled mode
Tailwind CSS integration
Pass Through for direct access to the underlying elements
Philosophy — what this project promises, and what it does not
FAQ