# Optimus UI Documentation
Generated: 2026-07-28
---
# Guide Pages
# Installation
Setting up Optimus UI in an Angular CLI project.
## 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.
## 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.
## 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. Then import the stylesheet, either from your global stylesheet or from the styles array in angular.json .
## Nextsteps-
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
## Ngadd-
The recommended way to add Optimus UI to an Angular CLI workspace is a single command. 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: 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.
## 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.
## 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.
```typescript
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
}
})
]
};
```
## 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.
---
# Configuration
Application wide configuration for Optimus UI.
## Csp-
The nonce value to use on dynamically generated style elements in core.
```typescript
provideOptimus({
csp: {
nonce: '...'
}
})
```
## Dynamic-
Inject the Optimus to your application to update the initial configuration at runtime.
```typescript
import { Component, OnInit } from '@angular/core';
import { Optimus } from '@openng/optimus-ui/config';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private config: Optimus) {}
ngOnInit() {
this.config.ripple.set(true);
}
}
```
## Filtermode-
Default filter modes to display on DataTable filter menus.
```typescript
import { OptimusConfig } from '@openng/optimus-ui/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private optimusConfig: OptimusConfig) {}
ngOnInit() {
optimusConfig.filterMatchModeOptions = {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
};
}
}
```
## Inputvariant-
Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. A theme such as Material may add more additional design changes per each variant.
## Api
Locale Options
## Repository
Ready to use settings for locales are available as the @openng/optimus-ui-locale package, maintained in the Optimus UI repository. We'd appreciate if you could contribute translations to the repository and share them with the rest of the community.
```typescript
import { de } from '@openng/optimus-ui-locale/js/de.js';
provideOptimus({
translation: de
})
```
## Runtime
The translations can be changed dynamically at runtime, here is an example with ngx-translate.
```typescript
import { Component, OnInit } from '@angular/core';
import { Optimus } from '@openng/optimus-ui/config';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private config: Optimus, private translateService: TranslateService) {}
ngOnInit() {
this.translateService.setDefaultLang('en');
}
translate(lang: string) {
this.translateService.use(lang);
this.translateService.get('optimus').subscribe(res => this.config.setTranslation(res));
}
}
```
## Translation
A translation is specified using the translation property during initialization.
```typescript
provideOptimus({
translation: {
accept: 'Aceptar',
reject: 'Rechazar',
//translations
}
})
```
## Overlayappendto-
Defines the default location of the overlays; self refers to the host element and body targets the document body. Defaults to self .
## Provider-
The initial configuration is defined by the provideOptimus provider during application startup.
```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideOptimus } from '@openng/optimus-ui/config';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimationsAsync(),
provideOptimus({ /* options */ })
]
};
```
## Ripple-
Ripple is an optional animation for the supported components such as buttons. It is disabled by default.
```typescript
provideOptimus({
ripple: true
})
```
## Theme-
Optimus UI provides 4 predefined themes out of the box; Aura, Material, Lara and Nora. See the theming documentation for details.
```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideOptimus } from '@openng/optimus-ui/config';
import Aura from '@openng/optimus-ui-themes/aura';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimationsAsync(),
provideOptimus({
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
})
]
};
```
## Zindex-
ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. Optimus UI configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up Optimus UI.
```typescript
import { OptimusConfig } from '@openng/optimus-ui/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private optimusConfig: OptimusConfig) {}
ngOnInit() {
this.optimusConfig.zIndex = {
modal: 1100, // dialog, sidebar
overlay: 1000, // dropdown, overlaypanel
menu: 1000, // overlay menus
tooltip: 1100 // tooltip
};
}
}
```
---
# Styled Mode
Choose from a variety of pre-styled themes or develop your own.
## Architecture-
Optimus UI is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. Styling is decoupled from the components using the themes instead. A theme consists of two parts; base and preset . The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different presets, currently Aura, Material, Lara and Nora are the available built-in options. The core of the styled mode architecture is based on a concept named design token , a preset defines the token configuration in 3 tiers; primitive , semantic and component . Primitive Tokens Primitive tokens have no context, a color palette is a good example for a primitive token such as blue-50 to blue-900 . A token named blue-500 may be used as the primary color, the background of a message however on its own, the name of the token does not indicate context. Usually they are utilized by the semantic tokens. Semantic Tokens Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the primary.color . Semantic tokens map to primitive tokens or other semantic tokens. The colorScheme token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode. Component Tokens Component tokens are isolated tokens per component such as inputtext.background or button.color that map to the semantic tokens. As an example, button.background component token maps to the primary.color semantic token which maps to the green.500 primitive token. Best Practices Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the Optimus UI components using style classes is not a best practice and should be the last resort, design tokens are the suggested approach.
## Bootstrap-
Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.
## Colors-
Color palette of a preset is defined by the primitive design token group. You can access colors using CSS variables or the $dt utility. @for (color of colors; track color) { {{ color }} @for (shade of shades; track shade) { {{ shade }} } }
## Colorscheme-
A token can be defined per color scheme using light and dark properties of the colorScheme property. Each token can have specific values based on the current color scheme. Common Pitfall When customizing an existing preset, your token overrides may be ignored if you don't properly account for color scheme variations. If the original preset defines a token using the colorScheme property, but your customization only provides a direct value, your override will be ignored because the colorScheme property takes precedence over direct values and the system will continue using the preset's scheme-specific values. When customizing tokens that are not defined with colorScheme in the original preset, your customizations will be applied successfully regardless of how you structure them; whether direct or under colorScheme. Best Practices Check how tokens are defined in the preset before customizing from the source . Always maintain the same structure (direct value or colorScheme) as the original preset. Consider both light and dark mode values when overriding scheme-dependent tokens. This approach ensures your customizations will be applied correctly regardless of the user's selected color scheme.
## Component-
The design tokens of a specific component is defined at components layer. Overriding components tokens is not the recommended approach if you are building your own style, building your own preset should be preferred instead. This configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example.
## Darkmode-
Optimus UI uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, set the darkModeSelector to the selector you utilize such as .my-app-dark so that Optimus UI can fit in seamlessly with your color scheme. Following is a very basic example implementation of a dark mode switch, you may extend it further by involving prefers-color-scheme to retrieve it from the system initially and use localStorage to make it stateful. See this article for more information. In case you prefer to use dark mode all the time, apply the darkModeSelector initially and never change it. It is also possible to disable dark mode completely using false or none as the value of the selector.
## Definepreset-
The definePreset utility is used to customize an existing preset during the Optimus UI setup. The first parameter is the preset to customize and the second is the design tokens to override.
## Dt-
The $dt function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically.
## Extend-
The theming system can be extended by adding custom design tokens and additional styles. This feature provides a high degree of customization, allowing you to adjust styles according to your needs, as you are not limited to the default tokens. The example preset configuration adds a new accent button with custom button.accent.color and button.accent.inverse.color tokens. It is also possible to add tokens globally to share them within the components.
## Focusring-
Focus ring defines the outline width, style, color and offset. Let's use a thicker ring with the primary color for the outline.
## Font-
There is no design for fonts as UI components inherit their font settings from the application.
## Forms-
The design tokens of the form input components are derived from the form.field token group. This customization example changes border color to primary on hover. Any component that depends on this semantic token such as dropdown.hover.border.color and textarea.hover.border.color would receive the change.
## Libraries-
Example layer configuration for the popular CSS libraries.
## Noir-
The noir mode is the nickname of a variant that uses surface tones as the primary and requires and additional colorScheme configuration to implement. A sample preset configuration with black and white variants as the primary color;
## Options-
The options property defines the how the CSS would be generated from the design tokens of the preset. prefix The prefix of the CSS variables, defaults to p . For instance, the primary.color design token would be var(--p-primary-color) . darkModeSelector The CSS rule to encapsulate the CSS variables of the dark mode, the default is the system to generate {{ '@' }}media (prefers-color-scheme: dark) . If you need to make the dark mode toggleable based on the user selection define a class selector such as .app-dark and toggle this class at the document root. See the dark mode toggle section for an example. cssLayer Defines whether the styles should be defined inside a CSS layer by default or not. A CSS layer would be handy to declare a custom cascade layer for easier customization if necessary. The default is false .
## Palette-
Returns shades and tints of a given color from 50 to 950 as an array.
## Presets-
Aura, Material, Lara and Nora are the available built-in options, created to demonstrate the power of the design-agnostic theming. Aura is PrimeTek's own vision, Material follows Google Material Design v2, Lara is based on Bootstrap and Nora is inspired by enterprise applications. Visit the source code to learn more about the structure of presets. You may use them out of the box with modifications or utilize them as reference in case you need to build your own presets from scratch.
## Primary-
The primary defines the main color palette, default value maps to the emerald primitive token. Let's setup to use indigo instead.
## Reset-
In case Optimus UI components have visual issues in your application, a Reset CSS may be the culprit. CSS layers would be an efficient solution that involves enabling the Optimus UI layer, wrapping the Reset CSS in another layer and defining the layer order. This way, your Reset CSS does not get in the way of Optimus UI components.
## Scale-
Optimus UI UI component use rem units, 1rem equals to the font size of the html element which is 16px by default. Use the root font-size to adjust the size of the components globally. This website uses 14px as the base so it may differ from your application if your base font size is different.
## Scopedtokens-
Design tokens can be scoped to a certain component using the dt property. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens. This approach is recommended over the ::ng-deep as it offers a cleaner API while avoiding the hassle of CSS rule overrides.
## Specificity-
The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at MDN to begin with. The cssLayer is disabled by default, when it is enabled at theme configuration, Optimus UI wraps the built-in style classes under the optimus cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
## Surface-
The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses zinc for light mode and slategray for dark mode. With this setting, light mode, would have a grayscale tone and dark mode would include bluish tone.
## Theme-
The theme property is used to customize the initial theme.
```typescript
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
}
})
]
};
```
## Updatepreset-
Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically.
## Updateprimarypalette-
Updates the primary colors, this is a shorthand to do the same update using updatePreset .
## Updatesurfacepalette-
Updates the surface colors, this is a shorthand to do the same update using updatePreset .
## Usepreset-
Replaces the current presets entirely, common use case is changing the preset dynamically at runtime.
---
# Unstyled Mode
Theming Optimus UI with alternative styling approaches.
## Architecture-
The term unstyled is used to define an alternative styling approach instead of the default theming with design tokens. In unstyled mode the css variables of the design tokens and the css rule sets that utilize them are not included. Here is an example of an Unstyled Select, the core functionality and accessibility is provided whereas styling is not included.
## Example-
Unstyled components require styling using your preferred approach. We recommend using Tailwind CSS with PassThrough attributes, a combination that works seamlessly together. The @openng/optimus-ui-tailwindcss even provides special variants such as p-outlined: , p-vertical for the Optimus UI components. The example below demonstrates how to style a button component with Tailwind CSS using PassThrough attributes. Before you begin, refer to the pass through section in the button documentation to familiarize yourself with the component's internal structure and PassThrough attributes. In this example, we'll target the root , label and icon elements to apply custom styles.
## Global-
A global configuration can be created at application level to avoid repetition via the global pt option so that the styles can be shared from a single location. A particular component can still override a global configuration with its own pt property.
```typescript
import { ApplicationConfig } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
provideOptimus({
unstyled: true,
pt: {
button: {
root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
label: 'text-white font-bold text-lg',
icon: 'text-white !text-xl'
}
}
})
]
};
```
## Setup-
Unstyled mode is enabled for the whole suite by enabling unstyled option during Optimus UI installation. Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component.
---
# Icons
OpenNG Icons is the default icon library of Optimus UI with over 250 open source icons.
## Basic-
OpenNG Icons use the pi pi-{icon} syntax such as pi pi-check . A standalone icon can be displayed using an element such as i or span
## Color-
Icon color is defined with the color property which is inherited from parent by default.
## Constants-
Constants API is available to reference icons easily when used programmatically.
```typescript
import { Component } from '@angular/core';
import { OpenngIcons, MenuItem } from '@openng/optimus-ui/api';
@Component({
selector: 'openng-icons-constants-demo',
templateUrl: './openng-icons-constants-demo.html'
})
export class OpenngIconsConstantsDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'New',
icon: OpenngIcons.PLUS,
},
{
label: 'Delete',
icon: OpenngIcons.TRASH
}
];
}
}
```
## Download-
The icon library is available at npm, run the following command to download it to your project.
## Import-
CSS file of the icon library needs to be imported in styles.scss of your application.
## List-
Here is the full list of icons. More icons will be added periodically and you may also request new icons at the issue tracker.
## Size-
Size of an icon is controlled with the font-size property of the element.
## Spin-
Special pi-spin class applies infinite rotation to an icon.
---
# Custom Icons
Use custom icons with Optimus UI components.
## Fontawesome-
Font Awesome is a popular icon library with a wide range of icons.
## Image-
Any type of image can be used as an icon.
## Material-
Material icons is the official icon library based on Google Material Design.
## Svg-
Inline SVGs are embedded inside the dom.
---
# Pass Through
Pass Through Props allow direct access to the underlying elements for complete customization.
## Basic-
Each component has a special pt property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the element. Every component documentation has a dedicated section to document the available section names exposed via PT.
## Global-
PassThrough object can also be defined at a global level to apply all components in an application using the provideOptimus provider. For example, with the configuration here all panel headers have the bg-primary style class and all autocomplete components have a fixed width. These settings can be overridden by a particular component as components pt property has higher precedence over global pt by default.
## Instance-
In cases where you need to access the UI Component instance, define a component passthrough type that exposes the component instance or a function that receives a PassThroughContext as parameter.
## Introduction-
In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of inputs, outputs, and content projection. Whenever a requirement emerges for a new customization option in the API, the component author needs to develop and publish it with a new release. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The primary advantage of this approach is that it frees you from being restricted by the main component API. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific requirement. Each component has a special pt property to define an object with keys corresponding to the available DOM elements. A value of a key can either be a string, an object or a function to define the arbitrary properties such as styling, aria, data-* or custom attributes for the element. If the value is a string or a function that returns a string, it serves as a shorthand for a style class definition. Every component documentation has a dedicated segment to document the available section names in the interactive PT Viewer. Panel Example In this example, a Panel is customized with various options through pt . The styling is overriden with Tailwind CSS and header receives custom attributes along with a click event. The attributes passed to the header are not available in the component API, thanks to PassThrough feature, this is no longer an issue as you are not limited to the component api. Note that, you may avoid the ! based overrides in Tailwind classes if you setup CSS Layers with Optimus UI. Visit the Override section at Tailwind integration for examples.
## Lifecycle-
Lifecycle hooks of components are exposed as pass through using the hooks property so that callback functions can be registered. Available callbacks are onBeforeInit , onInit , onChanges , onDoCheck , onAfterContentInit , onAfterContentChecked , onAfterViewInit , onAfterViewChecked and onDestroy . Refer to the Angular documentation for detailed information about lifecycle hooks.
## Pcprefix-
A UI component may also use other UI components, in this case section names are prefixed with pc (Prime Component) to denote the Optimus UI component begin used. This distinguishes components from standard DOM elements and indicating the necessity for a nested structure. For example, the badge section is identified as pcBadge because the button component incorporates the badge component internally.
## Ptoptions-
The ptOptions property determines how a component's local PassThrough configuration merges with the global PT configuration, as demonstrated in the following examples using both global and component-level settings. The mergeSections defines whether the sections from the main configuration gets added and the mergeProps controls whether to override or merge the defined props. Defaults are true for mergeSections and false for mergeProps . Global Configuration mergeSections: true, mergeProps: false (default) mergeSections: true, mergeProps: true mergeSections: false, mergeProps: true mergeSections: false, mergeProps: false
---
# Tailwind CSS
Integration between Optimus UI and Tailwind CSS.
## Animations-
The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.
## Colorpalette-
Optimus UI color palette as utility classes.
## Darkmode-
In styled mode, Optimus UI uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, ensure that darkModeSelector is aligned with the Tailwind dark variant for seamless integration. Note that, this particular configuration isn't required if you're utilizing the default system color scheme. Suppose that, the darkModeSelector is set as my-app-dark in Optimus UI. Tailwind v4 Add a custom variant for dark with a custom selector. Tailwind v3 Use the plugins option in your Tailwind config file to configure the plugin.
## Extensions-
The plugin extends the default configuration with a new set of utilities. All variants and breakpoints are supported e.g. dark:sm:hover:bg-primary . Color Palette Class Property primary-[50-950] Primary color palette. surface-[0-950] Surface color palette. primary Default primary color. primary-contrast Default primary contrast color. primary-emphasis Default primary emphasis color. border-surface Default primary emphasis color. bg-emphasis Emphasis background e.g. hovered element. bg-highlight Highlight background. bg-highlight-emphasis Highlight background with emphasis. rounded-border Border radius. text-color Text color with emphasis. text-color-emphasis Default primary emphasis color. text-muted-color Secondary text color. text-muted-color-emphasis Secondary text color with emphasis.
## Form-
Using Tailwind utilities for the responsive layout of a form with Optimus UI components.
## Headless-
A headless Optimus UI dialog with a custom UI.
## Override-
Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer. Important Use the ! as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle. Tailwind v4 Tailwind v3 CSS Layer CSS Layer provides control over the css specificity so that Tailwind utilities can safely override components. Tailwind v4 Ensure optimus layer is after theme and base , but before the other Tailwind layers such as utilities . No change in the CSS configuration is required. Tailwind v3 The optimus layer should be between base and utilities. Tailwind v3 does not use native layer so needs to be defined with CSS.
## Overview-
Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated btn class as in Bootstrap, Tailwind offers primitive classes like bg-blue-500 , rounded and p-4 to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that take this approach to build components specifically for Tailwind. Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Angular, this is where Optimus UI comes in by providing a wide range of highly accessible and feature rich UI component library. The core of Optimus UI does not depend on Tailwind CSS.
## Plugin-
The @openng/optimus-ui-tailwindcss is a plugin to provide first class integration between Optimus UI and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. bg-primary , text-surface-500 , text-muted-color . If you haven't already done so, start by integrating Tailwind into your project. Detailed steps for this process can be found in the Tailwind documentation . After successfully installing Tailwind, proceed with the installation of the OptimusUiTailwind plugin. This single npm package comes with two libraries: the CSS version is compatible with Tailwind v4, while the JS version is designed for Tailwind v3. Tailwind v4 In the CSS file that contains the tailwindcss import, add the @openng/optimus-ui-tailwindcss import as well. For a comprehensive starter guide, review the Optimus UI repository which demonstrates the integration. Tailwind v3 Use the plugins option in your Tailwind config file to configure the plugin.
---
# LLMs.txt
LLM-optimized documentation endpoints for Optimus UI components.
## Llmsfulltxt-
The llms-full.txt file is a complete list of all the pages in the Optimus UI documentation. It is used to help AI models understand the entire documentation set.
## Llmstxt-
The llms.txt file is an industry standard that helps AI models better understand and navigate the Optimus UI documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information.
## Markdownextension-
Add a .md to a page's URL to display a Markdown version of that page.
---
# Accessibility
Optimus UI has WCAG 2.1 AA level compliance.
## Colors-
Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration. Good Contrast Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples. GOOD BAD Vibration Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration. VIBRATE Dark Mode Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred. Indigo 500 Indigo 200
## Formcontrols-
Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with space key as well to trigger. On the other hand, a fancy css based button using a div has no keyboard or screen reader support. tabindex is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls should be preferred. Relations Form components must be related to another element that describes what the form element is used for. This is usually achieved with the label element.
## Introduction-
According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to ensure content can be consumed by anyone. Disabilities Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories; Visual Impairments Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers are required to make sure content is readable by the readers. Popular readers are NVDA , JAWS and ChromeVox . Hearing Impairments Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing textual alternatives, transcripts and captions for content with audio. Mobility Impairments People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad remain as solutions for people who are not able to utilize a mouse. Cognitive Impairments Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive impairments result in better design for any user.
## Semantichtml-
HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular div elements with classes are used. Consider the following example that do not mean too much for readers. Same layout can be achieved using the semantic elements with screen reader support built-in.
## Waiaria-
ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like Optimus UI. These types of components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized. ARIA consists of roles, properties and attributes. Roles define what the element is mainly used for e.g. checkbox , dialog , tablist whereas States and Properties define the metadata of the element like aria-checked , aria-disabled . Consider the following case of a native checkbox. It has built-in keyboard and screen reader support. A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read by a reader. One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of aria-labelledby as a replacement of the label tag with for. However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of p-sr-only that hides the elements from the user but not from the screen reader. A working sample is the Optimus UI checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox. Remember Me
## Wcag-
WCAG refers to Web Content Accessibility Guideline , a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible. Optimus UI components aim high level of WCAG compliancy in the near future. Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are Section 508 in the US and Web Accessibility Directive of the European Union.
---
# Animations
Built-in CSS animations for Optimus UI components.
## Anchoredoverlays-
Anchored overlays are the components that have a floating ui positioned relatively to another element such as Select, Popover. The enter and leave animations are defined with the .p-anchored-overlay-enter-active and .p-anchored-overlay-leave-active classes.
## Collapsibles-
Collapsible components have a content that is toggleable including Accordion, Panel, Fieldset, Stepper and PanelMenu. The enter and leave animations are defined with the .p-collapsible-enter-active and .p-collapsible-leave-active classes. Header I Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Header II Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. Header III Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
## Dialog-
Overlays such as Dialog and Drawer are positioned relative to the viewport and have their own animations. Update your information. Username Email
## Disable-
Individual animations can be reduced and even disabled completely using the animation duration.
## Introduction-
Various Optimus UI Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations. Animations are defined using a combination of style classes and keyframes. The .{classname}-enter-active and .{classname}-leave-active classes specify the animation name, duration, and easing function. You can customize animations globally by overriding the default animation classes, affecting all components. Alternatively, you can apply scoped classes to individual components to modify their animations independently. For demo purposes, this second approach is used throughout the next sections.
## Reference-
List of class names of the CSS animations used by the components. Component Enter Class Leave Class Accordion .p-collapsible-enter-active .p-collapsible-leave-active AutoComplete .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active CascadeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ColorPicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ConfirmPopup .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ContextMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active DatePicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Dialog .p-dialog-enter-active .p-dialog-leave-active Drawer .p-drawer-enter-active .p-drawer-leave-active Fieldset .p-collapsible-enter-active .p-collapsible-leave-active Galleria .p-galleria-enter-active .p-galleria-leave-active Image .p-image-original-enter-active .p-image-original-leave-active Menu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Message .p-message-enter-active .p-message-leave-active Modal Masks .p-overlay-mask-enter-active .p-overlay-mask-leave-active MultiSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Panel .p-collapsible-enter-active .p-collapsible-leave-active PanelMenu .p-collapsible-enter-active .p-collapsible-leave-active Password .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Select .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Stepper .p-collapsible-enter-active .p-collapsible-leave-active TieredMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Toast .p-toast-message-enter-active .p-toast-message-leave-active TreeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active
---
# RTL
Right-to-left support for Optimus UI components.
## Configuration-
The Optimus UI components natively support Right-to-Left (RTL) text direction through a modern CSS implementation utilizing FlexBox and classes like *-inline-start and *-block-end . Consequently, no JavaScript configuration is necessary; setting the document's text direction to RTL is sufficient to enable this feature. The RTL setting can either be set using the dir attribute or with the direction style property.
## Limitations-
RTL is widely supported by the UI suite except the Galleria and Carousel components. These components will be enhanced with a modern implementation in upcoming versions with built-in support for RTL.
---
# PrimeFlex
Moving from PrimeFlex to Tailwind CSS.
## Compatibility-
If you are staying on PrimeFlex for now, Optimus UI v1 pairs with PrimeFlex v4 — the same combination that worked with PrimeNG v18 and newer, since the styling architecture is unchanged. PrimeFlex v3 targeted the older PrimeNG releases and is not a supported pairing here. Neither version is tested against Optimus UI releases, so treat this as "should work", not as a supported configuration. The migration below is the path we actually maintain.
## Migration-
PrimeFlex class names map closely onto Tailwind's, so most of the work is mechanical. PrimeTek's primeclt ships a pf2tw command that does the conversion, and it works on any codebase — it rewrites class names and does not care which component library you use. Run pf2tw in a directory containing the files to convert. A handful of PrimeFlex classes have no Tailwind counterpart and are left alone. Replace them with flexbox or grid utilities by hand: formgrid formgroup formgroup-inline col col-fixed field field-checkbox field-radiobutton reset
## Overview-
PrimeFlex was PrimeTek's lightweight CSS utility library, designed to accompany PrimeNG. PrimeTek stopped maintaining it before the relicensing, on the grounds that most applications already bring their own utility layer — Tailwind, Bootstrap or something in-house — and a second one only overlaps with it. Optimus UI does not maintain PrimeFlex either, and for the same reason. Nothing in this library depends on it, and no component requires it. If your application already uses PrimeFlex it will keep working, but it will not receive updates from us, and we suggest moving to Tailwind CSS.
## Tailwindcss-
Tailwind CSS is the replacement we suggest. This documentation site is itself built with it, and we publish @openng/optimus-ui-tailwindcss for first-class integration — a plugin that teaches Tailwind about the theme's design tokens and puts the component styles in a cascade layer you can override cleanly. See the Tailwind CSS guide for setup with either Tailwind v3 or v4, and the next section for converting existing PrimeFlex classes.
---
# Philosophy
Why Optimus UI exists, what it commits to, and where it stops.
## Governance-
Everything happens in the open, in the repository . There is no private roadmap and no internal issue tracker. What you see in the issues, the discussions and the roadmap is the whole plan. Contributors earn commit access by contributing — the contribution guide describes the Contributor and Committer roles and roughly what it takes to reach them. We would rather grow the number of people who can merge a fix than route everything through one person. Breaking changes are avoided within a major and documented when a major requires them. Where we inherited a name that no longer fits — the CSS cascade layer, the package scope, the icon library — we changed it once, at v1, with a migration schematic, rather than dripping renames across releases.
## Limits-
Naming the limits is what makes the commitments above worth anything. Here is what Optimus UI is not. There is no commercial support No SLA, no support contract, no guaranteed response time. Issues and discussions are answered by volunteers when they have time. If your organisation needs contractual guarantees, this project cannot provide them and you should plan accordingly. There are no premium templates, blocks or design tooling PrimeTek's application templates, block library and visual theme designer are their commercial products. They are not part of what was MIT licensed, so they are not part of this fork and will not be reimplemented. Theming here means editing preset objects in code, which is documented in full. We are not chasing feature parity with PrimeNG v22 and beyond PrimeNG continues under its own license and its own roadmap. Optimus UI diverges from v21 forward. Some things they add, we will not have. Some things we fix, they will not. Treat the two as separate libraries that share an ancestor, not as a free copy of a paid product. The bus factor is real This is maintained by a small group of people in their own time. We would rather say that plainly than imply a larger organisation stands behind it. The best way to change that number is to contribute .
## Origin-
In June 2026 PrimeTek archived the PrimeNG repository and moved future major versions, starting with v22, to a commercial license. They explained their reasoning in their own announcement , and it is worth reading. Maintaining a component library of this size for a decade, largely for free, is genuinely hard, and we do not think the decision was made lightly. It did, however, leave a lot of applications on a library with no further open source releases. Optimus UI exists for those applications. It is a community fork of the last MIT licensed version of PrimeNG, v21, and it stays MIT. This is not an official fork and it is not endorsed by PrimeTek. It is a separate repository, seeded with PrimeNG's code and history, maintained by people who depend on it.
## Promises-
Four commitments, in the order we would want to read them if we were choosing a dependency: MIT, with no second tier Every package we publish is MIT licensed. There is no paid edition, no enterprise build, no feature held back behind a subscription, and no plan to introduce one. If that ever changed, it would be a fork of this project rather than a relicensing of it, because the code we inherited is MIT and so is everything we add to it. We track Angular Our release cadence follows Angular's. When a new Angular major lands, the priority is a compatible Optimus UI major — before new features, before refactors. Staying upgradeable is the single most valuable thing a component library can do for the applications built on it. Bugs before features We inherited a large backlog along with the code. Fixing what is broken ranks above adding what is missing. Feature requests are triaged and welcome, but they generally ship when someone in the community implements them. No surprises in your bundle The library sends no telemetry, phones no home, and requires no account or key to use. What you install is what runs.
## Sustainability-
The honest answer to "how is this funded" is: it mostly is not. OpenNG covers the hosting and the domain; the work is volunteered. That is a fragile arrangement, and it is the main risk to this project — larger than any technical risk we can see today. The things that actually help, roughly in order of impact: Reproducing and triaging issues. A bug with a minimal reproduction is several times more likely to get fixed. Sending pull requests, especially for issues labelled help-needed . Answering questions in discussions, so the same answer is not written five times. Improving this documentation. Every page has a source file and every fix is welcome. Telling your employer you depend on it. Sponsored maintenance time is worth more than any one-off donation. The contribution guide covers how to get started.
## Trademark-
Optimus UI is not affiliated with, endorsed by, or sponsored by PrimeTek. PrimeNG, PrimeFaces, PrimeReact, PrimeVue and PrimeFlex are their trademarks. The rename from the inherited names — the packages, the CSS layer, the icon library — is a trademark matter, not a technical one, and it is why ng add ships a migration schematic rather than asking you to rewrite imports by hand. References to PrimeNG remain throughout this documentation and the source, and they are deliberate. Attribution is the point: this library is PrimeTek's decade of work plus whatever the community adds on top. Pretending otherwise would be both dishonest and useless to anyone trying to find their way around a familiar API. The code we forked was published under the MIT license, and we distribute it under those same terms, with the original copyright notices intact.
---
# FAQ
Licensing, migration from PrimeNG, the ecosystem, and how support works.
## Ecosystem-
Do the PrimeNG themes work? The built-in presets do — Aura, Material, Lara and Nora ship in @openng/optimus-ui-themes and are configured the same way. A preset you wrote yourself against PrimeNG v21 will work after the import paths are updated, which the migration schematic handles. What about the Theme Designer, templates and blocks? Those are PrimeTek's commercial products. They were never MIT licensed, so they are not part of this fork and we will not be reimplementing them. Theming in Optimus UI means editing preset objects in code, which is documented in full under styled mode . What replaced PrimeIcons? OpenNG Icons , installed as @openng/icons . The pi pi-{icon} class names are unchanged, so templates do not need editing — only the package name and the stylesheet import, both of which the migration schematic rewrites. What about PrimeFlex? PrimeFlex is not maintained here. We suggest Tailwind CSS instead, and ship @openng/optimus-ui-tailwindcss for first-class integration — see the Tailwind guide . The PrimeFlex guide covers moving across. Does Optimus UI work with SSR? This documentation site is itself an Angular SSR application built on Optimus UI, prerendered at build time. So yes, and any regression there tends to be noticed quickly.
## Migration-
Which Angular versions are supported? Angular v21 and newer. Our majors follow Angular's — when a new Angular major ships, a compatible Optimus UI major is the first thing we work on. How do I migrate from PrimeNG? Is it automatic? Mostly. Run ng add @openng/optimus-ui in a PrimeNG v21 workspace and it detects the existing dependency and runs the full migration: packages swapped, imports rewritten, dependencies installed. It then prints a report of anything it could not rewrite, with file and line numbers. The migration guide covers the details and the manual cases. I am on PrimeNG v20 or older. Can I migrate directly? No. Upgrade to PrimeNG v21 first, using PrimeNG's own migration guides, then run the schematic. The schematic checks the version and refuses rather than producing a half-migrated workspace. What happens to my PrimeNG license? Nothing — it is unrelated. A PrimeNG v22 commercial license covers PrimeNG. Optimus UI needs no license at all. If you hold a PrimeTek subscription for their templates or theme designer, those remain their products and do not carry over here. I had an open PR on primefaces/primeng. Can I bring it here? Yes, and we would like you to. Append .patch to your original pull request URL and apply it with git am — the contributing guide in the repository walks through it, including what to do when the patch no longer applies cleanly. Can I run PrimeNG and Optimus UI side by side? Technically yes, since the package names and the CSS cascade layer differ, but you will ship two copies of the same components and two theme runtimes. Treat it as a temporary state during migration rather than a supported configuration.
## Project-
Is Optimus UI free? Will it stay free? Yes, and yes. Every package is MIT licensed, and the code we forked was MIT too, so relicensing it is not something we could do even if we wanted to. There is no paid tier and none is planned. The philosophy page goes into what that does and does not buy you. Is this an official PrimeNG fork? Are you affiliated with PrimeTek? No. Optimus UI is an independent community fork, not affiliated with, endorsed by, or sponsored by PrimeTek. It is a separate repository seeded with PrimeNG's MIT licensed code and history, not a fork of the archived primefaces/primeng repository. Which PrimeNG version is this forked from? PrimeNG v21, the last version published under the MIT license. Optimus UI v1 is that codebase, rebranded, with the fixes that have landed since. Who maintains it, and how is it funded? A small group of volunteers, with OpenNG covering hosting and the domain. We are deliberate about not implying more than that — see sustainability for the honest version and the ways that can change. Why did the name change? Trademark. PrimeNG, PrimeFaces and PrimeFlex are PrimeTek's marks, so the packages, the CSS cascade layer and the icon library all needed new names. That is also why the rename is handled by a schematic rather than by asking you to rewrite imports by hand.
## Support-
Is there commercial support? No. There is no SLA, no support contract and no guaranteed response time. Issues and discussions are answered by volunteers when they have time. If your organisation needs contractual guarantees, this project cannot offer them. How do I report a bug? Open an issue on GitHub with a minimal reproduction — a StackBlitz from any demo on this site is ideal — plus your Optimus UI, Angular and browser versions. A reproduction is the difference between a bug that gets fixed and one that sits in the backlog. How do I request a feature? Open a discussion . Requests are triaged and welcome, but in practice they ship when someone implements them. If it matters to you, the contribution guide is the fastest route. Where do I ask questions? GitHub Discussions is the primary place. There is also an Ask AI button in the header, which answers from this documentation. Optimus UI does not run its own Discord — the Discord links here point to the general Angular community server. How does versioning work? Semantic versioning, with majors tracking Angular majors. Breaking changes are confined to majors and documented in the changelog.
---
# Migrate from PrimeNG
Moving a PrimeNG v21 application to Optimus UI.
## Automated-
The recommended way to migrate is the migrate-from-primeng schematic. Install @openng/optimus-ui first so the Angular CLI can resolve it, then run the schematic: packages are swapped, imports are rewritten and dependencies are installed. Note that ng add does not run the migration. It only sets up Optimus UI in a fresh project and makes no changes when primeng is detected. The schematic can be re-run at any time, for example after pulling in unmigrated code, and accepts a couple of flags. --skip-install skips the package install task and --force bypasses the PrimeNG v21 version check. After rewriting, the schematic scans the workspace and prints a report of any remaining primeng , primeicons or @primeuix references it could not migrate automatically, with file and line numbers. Review these manually using the tables in the manual migration section below. Files your .gitignore excludes are left alone, so coverage reports and build output are neither rewritten nor reported. The report itself is printed before the CLI lists the files it created and updated — that list only covers what the migration changed for you, so scroll back up to the warnings before you build.
## Manual-
If you prefer to migrate by hand, or need to finish references the schematic reported as leftovers, apply the renames below. Start by replacing the packages. Packages Replace the packages in package.json and in every import path. Subpath imports keep their suffix, for example primeng/button becomes @openng/optimus-ui/button . Identifiers Rename the following exported identifiers. The PrimeIcons constants class still compiles through a deprecated alias, however OpenngIcons is the current API. Assets The PrimeIcons stylesheet moved along with the package rename. Update references in global stylesheets and in the styles arrays of angular.json or project.json from primeicons/primeicons.css to @openng/icons/openng-icons.css . Example A typical app.config.ts and component before the migration. The same code after the migration.
## Overview-
Optimus UI is the open-source MIT licensed continuation of PrimeNG (now closed-source), rebranded due to trademark restrictions. Optimus UI v1 targets Angular 21 and is fully API-compatible with PrimeNG v21, so migrating is a rename rather than a rewrite. From v1 onward, Optimus UI evolves independently and future versions will diverge from PrimeNG, so v1 is the smoothest point to switch. Component selectors keep the p- prefix and icon classes keep the pi- prefix, so your templates are not affected by the migration.
## Prerequisites-
Your project must be on PrimeNG v21 before migrating, as Optimus UI v1 mirrors the PrimeNG v21 API. If you are on an older version, update PrimeNG first by following its v21 migration guide . The migration schematic verifies this requirement and aborts when PrimeNG is missing or older than v21. The check can be bypassed with the --force flag, for example in workspaces where the dependency is declared in a non-standard location.
## Schematic-details-
The schematic performs the following steps across the whole workspace, skipping build output and dependency folders. Swaps the PrimeNG package family for the Optimus UI equivalents in every package.json . Rewrites import specifiers and renamed identifiers, such as providePrimeNG , in all .ts and .mts source files. Updates asset references, such as the PrimeIcons stylesheet, in stylesheets and in angular.json / project.json . Prints a report of leftover references that require manual review. Schedules a package install, unless --skip-install is set.
## Verify-
Build the application and run your test suite to confirm the migration. Searching the project for the old package names is a quick way to find anything left behind. The schematic scans for the same pattern when it prints its leftover report.
---
# Contribution Guide
How to contribute to Optimus UI.
## Benefits-
Contributing to Optimus UI comes with several benefits. Being part of an open-source project will enhance your career and open up exciting opportunities. You'll gain significant visibility in the developer community while improving yourself as a professional.
## Helpneeded-
Optimus UI is a community-driven project stewarded by OpenNG, and we appreciate any help you can provide. Here are some areas where you can contribute: Issue Triage Help us manage issues by; Reproducing reported bugs Clarifying issue descriptions Tagging issues with appropriate labels Sending Pull Requests We encourage you to send pull requests, especially for issues tagged with the help-needed label. Community Support Assist other users by participating in the issue tracker, GitHub discussions , and the Angular community Discord . Your expertise can help others solve problems and improve their experience with Optimus UI.
## Introduction-
Optimus UI is a community-maintained Angular UI library, stewarded by OpenNG and dedicated to providing high-quality, versatile and accessible UI components that help developers build better applications faster. Development Setup To begin with, clone the Optimus UI repository from GitHub: Then run the documentation app in your local environment at http://localhost:4200/ . Project Structure Optimus UI's project structure is organized as follows:
## Pathway-
Optimus UI offers an organization structure involving contributors and the core team: Contributor Role After a certain period of frequent contributions, a community member is offered the Contributor role. On average, it may take about three months, but the exact duration can vary depending on the individual commitment. Committer Role If a contributor actively participates in the codebase and PRs, their role may be upgraded to a Committer level, providing direct commit access to the Optimus UI codebase.
---
# Components
# Angular Image Component
Displays an image with preview and tranformation options.
## Accessibility
Screen Reader The preview button is a native button element with an aria-label that refers to the aria.zoomImage property of the locale API by default. When preview is active, dialog role with aria-modal is applied to the overlay image container. Button controls use aria.rotateRight , aria.rotateLeft , aria.zoomIn , aria.zoomOut and aria.close from the locale API as aria-label . ButtonBar Keyboard Support When preview is activated, close button receives the initial focus. Key Function tab Moves focus through button bar. enter Activates the button. space Activates the button. esc Closes the image preview.
## Basic
Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.
**Example:**
```typescript
import { Component } from '@angular/core';
import { ImageModule } from '@openng/optimus-ui/image';
@Component({
template: `
`,
standalone: true,
imports: [ImageModule]
})
export class ImageBasicDemo {}
```
## Preview
Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.
**Example:**
```typescript
import { Component } from '@angular/core';
import { ImageModule } from '@openng/optimus-ui/image';
@Component({
template: `
`,
standalone: true,
imports: [ImageModule]
})
export class ImagePreviewDemo {}
```
## previewimagesource-doc
In case that you want to show different image on preview, you can set previewImageSrc attribute. It could come handy when wanted to use smaller image version at first and bigger one on preview.
**Example:**
```typescript
import { Component } from '@angular/core';
import { ImageModule } from '@openng/optimus-ui/image';
@Component({
template: `
`,
standalone: true,
imports: [ImageModule]
})
export class ImagePreviewimagesourceDemo {}
```
## Template
An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
**Example:**
```typescript
import { Component } from '@angular/core';
import { ImageModule } from '@openng/optimus-ui/image';
@Component({
template: `
`,
standalone: true,
imports: [ImageModule]
})
export class ImageTemplateDemo {}
```
## Image
Displays an image with preview and tranformation options. For multiple image, see Galleria.
### Props
| Name | Type | Default | Description |
|------|------|---------|-------------|
| dt | InputSignal
