PrimeNG

The Most Complete Angular UI Component Library

Guides

Installation: Setting up PrimeNG in an Angular CLI project.
Configuration: Application wide configuration for PrimeNG.
Styled Mode: Choose from a variety of pre-styled themes or develop your own.
Unstyled Mode: Theming PrimeNG with alternative styling approaches.
Icons: PrimeIcons is the default icon library of PrimeNG with over 250 open source icons.
Custom Icons: Use custom icons with PrimeNG components.
Pass Through: Pass Through Props allow direct access to the underlying elements for complete customization.
Tailwind CSS: Integration between PrimeNG and Tailwind CSS.
LLMs.txt: LLM-optimized documentation endpoints for PrimeNG components.
Accessibility: PrimeNG has WCAG 2.1 AA level compliance.
Animations: Built-in CSS animations for PrimeNG components.
RTL: Right-to-left support for PrimeNG components.
Migration v19: Migration guide to PrimeNG v19.
Migration v20: Migration guide to PrimeNG v20.
Migration v21: Migration guide to PrimeNG v21.

Components

Angular Accordion Component: Accordion groups a collection of contents in tabs.
Angular Animate On Scroll Directive: AnimateOnScroll AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
Angular AutoComplete Component: AutoComplete is an input component that provides real-time suggestions when being typed.
Angular AutoFocus Directive: AutoFocus manages focus on focusable element on load.
Angular Avatar Component: Avatar represents people using icons, labels and images.
Angular Badge Component: Badge is a small status indicator for another element.
Angular BlockUI Component: BlockUI can either block other components or the whole page.
Angular Breadcrumb Component: Breadcrumb provides contextual information about page hierarchy.
Angular Button Component: Button is an extension to standard button element with icons and theming.
Angular Card Component: Card is a flexible container component.
Angular Carousel Component: Carousel is a content slider featuring various customization options.
Angular CascadeSelect Component: CascadeSelect displays a nested structure of options.
Angular Chart Component: Chart components are based on Charts.js 3.3.2+, an open source HTML5 based charting library.
Angular Checkbox Component: Checkbox is an extension to standard checkbox element with theming.
Angular Chip Component: Chip represents entities using icons, labels and images.
Angular ColorPicker Component: ColorPicker is an input component to select a color.
Angular ConfirmDialog Component: ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component.
Angular ConfirmPopup Component: ConfirmPopup displays a confirmation overlay displayed relatively to its target.
Angular ContextMenu Component: ContextMenu displays an overlay menu on right click of its target.
Angular DataView Component: DataView displays data in grid grid-cols-12 gap-4 or list layout with pagination and sorting features.
Angular DatePicker Component: DatePicker is an input component to select a date.
Angular Dialog Component: Dialog is a container to display content in an overlay window.
Angular Divider Component: Divider is used to separate contents.
Angular Dock Component: Dock is a navigation component consisting of menuitems.
Angular Drag and Drop Component: pDraggable and pDroppable directives apply drag-drop behaviors to any element.
Angular Drawer Component: Drawer is a container component displayed as an overlay.
Angular Dynamic Dialog Component: Dialogs can be created dynamically with any component as the content using a DialogService.
Angular Editor Component: Editor is rich text editor component based on Quill.
Angular Fieldset Component: Fieldset is a grouping component with a content toggle feature.
Angular FileUpload Component: FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
Angular Float Label Component: FloatLabel appears on top of the input field when focused.
Angular Fluid Component: Fluid is a layout component to make descendant components span full width of their container.
Angular Focus Trap Component: Focus Trap keeps focus within a certain DOM element while tabbing.
Angular Gallery Component: Galleria is an advanced content gallery component.
Angular IconField Component: IconField wraps an input and an icon.
Angular Ifta Label Component: IftaLabel is used to create infield top aligned labels.
Angular ImageCompare Component: Compare two images side by side with a slider.
Angular Inplace Component: Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
Angular InputGroup Component: Text, icon, buttons and other content can be grouped next to an input.
Angular InputMask Component: InputMask component is used to enter input in a certain format such as numeric, date, currency and phone.
Angular InputNumber Component: InputNumber is an input component to provide numerical input.
Angular InputText Component: InputText is an extension to standard input element with theming and keyfiltering.
Angular KeyFilter Component: KeyFilter is a directive to restrict individual key strokes. In order to restrict the whole input, use InputNumber or InputMask instead.
Angular Knob Component: Knob is a form component to define number inputs with a dial.
Angular Listbox Component: Listbox is used to select one or more values from a list of items.
Angular MegaMenu Component: MegaMenu is navigation component that displays submenus together.
Angular Menu Component: Menu is a navigation / command component that supports dynamic and static positioning.
Angular Menubar Component: Menubar is a horizontal menu component.
Angular Message Component: Message component is used to display inline messages.
Angular MeterGroup Component: MeterGroup displays scalar measurements within a known range.
Angular MultiSelect Component: MultiSelect is used to select multiple items from a collection.
Angular OrderList Component: OrderList is used to sort a collection.
Angular Organization Chart Component: OrganizationChart visualizes hierarchical organization data.
Angular Otp Input Component: Input Otp is used to enter one time passwords.
Angular Paginator Component: Paginator displays data in paged format and provides navigation between pages.
Angular Panel Component: Panel is a container component with an optional content toggle feature.
Angular PanelMenu Component: PanelMenu is a hybrid of Accordion and Tree components.
Angular Password Component: Password displays strength indicator for password fields.
Angular PickList Component: PickList is used to reorder items between different lists.
Angular Popover Component: Popover is a container component that can overlay other components on page.
Angular ProgressBar Component: ProgressBar is a process status indicator.
Angular ProgressSpinner Component: ProgressSpinner is a process status indicator.
Angular RadioButton Component: RadioButton is an extension to standard radio button element with theming.
Angular Rating Component: Rating component is a star based selection input.
Angular Ripple Component: Ripple directive adds ripple effect to the host element.
Angular Scroll Panel Component: ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.
Angular Scroll Top Component: ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.
Angular Select Component: Select is used to choose an item from a collection of options.
Angular SelectButton Component: SelectButton is used to choose single or multiple items from a list using buttons.
Angular Skeleton Component: Skeleton is a placeholder to display instead of the actual content.
Angular Slider Component: Slider is a component to provide input with a drag handle.
Angular Speed Dial Component: SpeedDial is a floating button with a popup menu.
Angular SplitButton Component: SplitButton groups a set of commands in an overlay with a default action item.
Angular Splitter Component: Splitter is utilized to separate and resize panels.
Angular Stepper Component: The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.
Angular Steps Component: Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
Angular StyleClass Component: StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
Angular Table Component: Table displays data in tabular format.
Angular Tabs Component: Tabs is a container component to group content with tabs.
Angular Tag Component: Tag component is used to categorize content.
Angular Terminal Component:
Angular Textarea Component: Textarea adds styling and autoResize functionality to standard textarea element.
Angular TieredMenu Component: TieredMenu displays submenus in nested overlays.
Angular Timeline Component: Timeline visualizes a series of chained events.
Angular Toast Component: Toast is used to display messages in an overlay.
Angular ToggleButton Component: ToggleButton is used to select a boolean value using a button.
Angular ToggleSwitch Component: ToggleSwitch is used to select a boolean value.
Angular Toolbar Component: Toolbar is a grouping component for buttons and other content.
Angular Tooltip Component: Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.
Angular Tree Component: Tree is used to display hierarchical data.
Angular TreeSelect Component: TreeSelect is a form component to choose from hierarchical data.
Angular TreeTable Component: TreeTable is used to display hierarchical data in tabular format.
Angular Virtual Scroller Component: VirtualScroller is a performance-approach to handle huge data efficiently.
LLMs.txt - PrimeNG: LLM-optimized documentation endpoints for PrimeNG components.
Overlay API - PrimeNG: This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior.
uikit:

PrimeNG

The Most Complete Angular UI Component Library

Guides

Installation: Setting up PrimeNG in an Angular CLI project.
Configuration: Application wide configuration for PrimeNG.
Styled Mode: Choose from a variety of pre-styled themes or develop your own.
Unstyled Mode: Theming PrimeNG with alternative styling approaches.
Icons: PrimeIcons is the default icon library of PrimeNG with over 250 open source icons.
Custom Icons: Use custom icons with PrimeNG components.
Pass Through: Pass Through Props allow direct access to the underlying elements for complete customization.
Tailwind CSS: Integration between PrimeNG and Tailwind CSS.
LLMs.txt: LLM-optimized documentation endpoints for PrimeNG components.
Accessibility: PrimeNG has WCAG 2.1 AA level compliance.
Animations: Built-in CSS animations for PrimeNG components.
RTL: Right-to-left support for PrimeNG components.
Migration v19: Migration guide to PrimeNG v19.
Migration v20: Migration guide to PrimeNG v20.
Migration v21: Migration guide to PrimeNG v21.

Components

Angular Accordion Component: Accordion groups a collection of contents in tabs.
Angular Animate On Scroll Directive: AnimateOnScroll AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
Angular AutoComplete Component: AutoComplete is an input component that provides real-time suggestions when being typed.
Angular AutoFocus Directive: AutoFocus manages focus on focusable element on load.
Angular Avatar Component: Avatar represents people using icons, labels and images.
Angular Badge Component: Badge is a small status indicator for another element.
Angular BlockUI Component: BlockUI can either block other components or the whole page.
Angular Breadcrumb Component: Breadcrumb provides contextual information about page hierarchy.
Angular Button Component: Button is an extension to standard button element with icons and theming.
Angular Card Component: Card is a flexible container component.
Angular Carousel Component: Carousel is a content slider featuring various customization options.
Angular CascadeSelect Component: CascadeSelect displays a nested structure of options.
Angular Chart Component: Chart components are based on Charts.js 3.3.2+, an open source HTML5 based charting library.
Angular Checkbox Component: Checkbox is an extension to standard checkbox element with theming.
Angular Chip Component: Chip represents entities using icons, labels and images.
Angular ColorPicker Component: ColorPicker is an input component to select a color.
Angular ConfirmDialog Component: ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component.
Angular ConfirmPopup Component: ConfirmPopup displays a confirmation overlay displayed relatively to its target.
Angular ContextMenu Component: ContextMenu displays an overlay menu on right click of its target.
Angular DataView Component: DataView displays data in grid grid-cols-12 gap-4 or list layout with pagination and sorting features.
Angular DatePicker Component: DatePicker is an input component to select a date.
Angular Dialog Component: Dialog is a container to display content in an overlay window.
Angular Divider Component: Divider is used to separate contents.
Angular Dock Component: Dock is a navigation component consisting of menuitems.
Angular Drag and Drop Component: pDraggable and pDroppable directives apply drag-drop behaviors to any element.
Angular Drawer Component: Drawer is a container component displayed as an overlay.
Angular Dynamic Dialog Component: Dialogs can be created dynamically with any component as the content using a DialogService.
Angular Editor Component: Editor is rich text editor component based on Quill.
Angular Fieldset Component: Fieldset is a grouping component with a content toggle feature.
Angular FileUpload Component: FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
Angular Float Label Component: FloatLabel appears on top of the input field when focused.
Angular Fluid Component: Fluid is a layout component to make descendant components span full width of their container.
Angular Focus Trap Component: Focus Trap keeps focus within a certain DOM element while tabbing.
Angular Gallery Component: Galleria is an advanced content gallery component.
Angular IconField Component: IconField wraps an input and an icon.
Angular Ifta Label Component: IftaLabel is used to create infield top aligned labels.
Angular ImageCompare Component: Compare two images side by side with a slider.
Angular Inplace Component: Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
Angular InputGroup Component: Text, icon, buttons and other content can be grouped next to an input.
Angular InputMask Component: InputMask component is used to enter input in a certain format such as numeric, date, currency and phone.
Angular InputNumber Component: InputNumber is an input component to provide numerical input.
Angular InputText Component: InputText is an extension to standard input element with theming and keyfiltering.
Angular KeyFilter Component: KeyFilter is a directive to restrict individual key strokes. In order to restrict the whole input, use InputNumber or InputMask instead.
Angular Knob Component: Knob is a form component to define number inputs with a dial.
Angular Listbox Component: Listbox is used to select one or more values from a list of items.
Angular MegaMenu Component: MegaMenu is navigation component that displays submenus together.
Angular Menu Component: Menu is a navigation / command component that supports dynamic and static positioning.
Angular Menubar Component: Menubar is a horizontal menu component.
Angular Message Component: Message component is used to display inline messages.
Angular MeterGroup Component: MeterGroup displays scalar measurements within a known range.
Angular MultiSelect Component: MultiSelect is used to select multiple items from a collection.
Angular OrderList Component: OrderList is used to sort a collection.
Angular Organization Chart Component: OrganizationChart visualizes hierarchical organization data.
Angular Otp Input Component: Input Otp is used to enter one time passwords.
Angular Paginator Component: Paginator displays data in paged format and provides navigation between pages.
Angular Panel Component: Panel is a container component with an optional content toggle feature.
Angular PanelMenu Component: PanelMenu is a hybrid of Accordion and Tree components.
Angular Password Component: Password displays strength indicator for password fields.
Angular PickList Component: PickList is used to reorder items between different lists.
Angular Popover Component: Popover is a container component that can overlay other components on page.
Angular ProgressBar Component: ProgressBar is a process status indicator.
Angular ProgressSpinner Component: ProgressSpinner is a process status indicator.
Angular RadioButton Component: RadioButton is an extension to standard radio button element with theming.
Angular Rating Component: Rating component is a star based selection input.
Angular Ripple Component: Ripple directive adds ripple effect to the host element.
Angular Scroll Panel Component: ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.
Angular Scroll Top Component: ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.
Angular Select Component: Select is used to choose an item from a collection of options.
Angular SelectButton Component: SelectButton is used to choose single or multiple items from a list using buttons.
Angular Skeleton Component: Skeleton is a placeholder to display instead of the actual content.
Angular Slider Component: Slider is a component to provide input with a drag handle.
Angular Speed Dial Component: SpeedDial is a floating button with a popup menu.
Angular SplitButton Component: SplitButton groups a set of commands in an overlay with a default action item.
Angular Splitter Component: Splitter is utilized to separate and resize panels.
Angular Stepper Component: The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.
Angular Steps Component: Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
Angular StyleClass Component: StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
Angular Table Component: Table displays data in tabular format.
Angular Tabs Component: Tabs is a container component to group content with tabs.
Angular Tag Component: Tag component is used to categorize content.
Angular Terminal Component:
Angular Textarea Component: Textarea adds styling and autoResize functionality to standard textarea element.
Angular TieredMenu Component: TieredMenu displays submenus in nested overlays.
Angular Timeline Component: Timeline visualizes a series of chained events.
Angular Toast Component: Toast is used to display messages in an overlay.
Angular ToggleButton Component: ToggleButton is used to select a boolean value using a button.
Angular ToggleSwitch Component: ToggleSwitch is used to select a boolean value.
Angular Toolbar Component: Toolbar is a grouping component for buttons and other content.
Angular Tooltip Component: Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components.
Angular Tree Component: Tree is used to display hierarchical data.
Angular TreeSelect Component: TreeSelect is a form component to choose from hierarchical data.
Angular TreeTable Component: TreeTable is used to display hierarchical data in tabular format.
Angular Virtual Scroller Component: VirtualScroller is a performance-approach to handle huge data efficiently.
LLMs.txt - PrimeNG: LLM-optimized documentation endpoints for PrimeNG components.
Overlay API - PrimeNG: This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior.
uikit:

PrimeNG

PrimeNG

Guides

Components

Related Skills

Markdown Converter

Nano Banana Pro

1password

PrimeNG

Guides

Components