Installation

PrimeNG is a rich set of open source native Angular UI components.

Download #

PrimeNG is available for download at npm.


npm install primeng

Styles #

Theme and Core styles are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from. Styles can either be imported at angular.json or src/styles.css file.

With angular.json


...
"styles": [
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    ...
]

With styles.css


@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

CSS layer

The style classes of PrimeNG are defined under the primeng CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap, Normalize, or similar, a custom CSS layer configuration would be necessary for compatibility. View the CSS Layer guide for more information.


/* Order */
@layer reset, primeng;

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}

Usage #

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.


import { ButtonModule } from 'primeng/button';

Animations #

Various components utilize Angular animations to improve the user experience. Animations have their own module BrowserAnimationsModule is required to be imported in your application. If you prefer to disable animations globally, import NoopAnimationsModule instead.


import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class AppModule { }

QuickStart #

An example start with Angular CLI is available at github.

Videos #

Angular CLI is the recommended way to build Angular applications with PrimeNG.