Installation

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

Download

PrimeNG is available for download at npm.

npm install primeng

StylesTheme 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.