Theming PrimeNG is based on ThemeRoller CSS Framework.

Structural CSS

These style classes define the skeleton of the components and include css properties such as margin, padding, display type, dimensions and positioning.

Skinning CSS

Skinning defines the look and feel properties like colors, border colors, background images.

Style Class Applies
ui-widget All PrimeNG components
ui-widget-header Header section of a component
ui-widget-content Content section of a component
ui-state-default Default state of a clickable element
ui-state-hover Hover state of a clickable element like mouse over
ui-state-active Active state of a clickable element like mouse press
ui-state-highlight Highlighed elements
ui-state-disabled Disabled elements
fa Icon elements based on font awesome

These classes are not aware of structural css like margins and paddings, mostly they only define colors. This clean separation brings great flexibility in theming because you don’t need to know each and every skinning selectors of components to change their style.

For example Panel component’s header section has the "pui-panel-titlebar" structural class, to change the color of a panel header you don’t need to about this class as "ui-widget-header" defines colors for panel header.

Free Themes

38 free themes are available for PrimeNG, these include the themeroller themes, twitter bootstrap theme and 3rd party themes. ThemeSwitcher on the top right section of the page dynamically changes the theme at demo pages. Themes are distributed along with PrimeUI itself.

Premium Layouts and Themes

In addition to free themes, PrimeNG will also support premium themes and layouts derived from PrimeFaces and PrimeUI projects. Once the component size reaches around 50 components, these themes and layouts will be ported to PrimeNG as well. For more information and full list of themes and layouts, visit PrimeFaces Gallery.