{"id":3612,"date":"2026-04-02T18:19:28","date_gmt":"2026-04-02T18:19:28","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=3612"},"modified":"2026-04-09T13:14:22","modified_gmt":"2026-04-09T13:14:22","slug":"ignite-ui-for-react-19-5-1","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-for-react-19-5-1","title":{"rendered":"Ignite UI for React 19.5.1: What\u2019s New?"},"content":{"rendered":"\n<p>Ignite UI for React 19.5.1 is now available on npm. This release delivers LLM Agent Skills embedded directly in the package, PDF export for all grid variants, a full i18n overhaul with a new public localization API, dynamic scroll performance improvements, and native Popover API support for dropdowns and dialogs.<\/p>\n\n\n\n<p><strong>All the updates in Ignite UI for React 19.5.1 at a glance:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>LLM Agent Skills<\/strong>: 3 React-specific skill files ship inside the npm package, giving GitHub Copilot and other LLM agents step-by-step guidance for common tasks<\/li>\n\n\n\n<li><strong>Grid PDF Export<\/strong>: export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to PDF<\/li>\n\n\n\n<li><strong>Grid Scroll Performance<\/strong>: dynamic scroll throttle adjustment based on rendered data reduces jank in large datasets<\/li>\n\n\n\n<li><strong>Popover API<\/strong>: dropdowns and dialogs now use the HTML Popover API for better positioning and accessibility<\/li>\n\n\n\n<li><strong>i18n Overhau<\/strong>l: new Intl-based rendering pipeline, updated localization for all supported languages, and a new <code>igniteui-i18n-resources<\/code> package with a public API<\/li>\n\n\n\n<li><strong>Breaking<\/strong>: CSS custom property prefixes renamed; grid array mutation detection changed; Chat slot API updated; Tooltip <code>disableArrow<\/code> removed; Node.js \u2265 22 required<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install igniteui-react@19.5.1\nnpm install igniteui-react-grids@19.5.1<\/pre>\n\n\n\n<p><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/general-changelog-dv-react#1951\">Access the full changelog here.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">LLM Agent Skills<\/h3>\n\n\n\n<p>Three LLM Agent Skills now ship inside the <code>igniteui-react<\/code> npm package under the <code>skills\/<\/code> directory, teaching GitHub Copilot, Cursor, Windsurf, Claude Code, and other LLM-powered agents the correct <code>Igr*<\/code> components, import paths, JSX patterns, and styling approaches \u2014 all specific to React and the <code>igniteui-react<\/code> package family.<\/p>\n\n\n\n<p>Each Skill is a self-contained markdown file with step-by-step instructions, code examples, and a <code>reference\/<\/code> subdirectory of supporting material. Wire them into your agent once per project and every session follows your standards automatically.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Skill<\/th><th>What it covers<\/th><th>Use when<\/th><\/tr><\/thead><tbody><tr><td><code>igniteui-react-components<\/code><\/td><td>Identify the right <code>Igr*<\/code> component for a UI pattern, then install, import, and use it \u2014 JSX patterns, events, refs, forms<\/td><td>Choosing components or setting up and using them in React<\/td><\/tr><tr><td><code>igniteui-react-customize-theme<\/code><\/td><td>Customize styling using CSS custom properties, Sass, and the Ignite UI theming system in a React context<\/td><td>Applying custom brand colors or styles<\/td><\/tr><tr><td><code>igniteui-react-optimize-bundle-size<\/code><\/td><td>Reduce bundle size with granular imports, tree-shaking, and lazy loading<\/td><td>Optimizing production performance<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Getting the Skills into your IDE<\/h4>\n\n\n\n<p>Skills are already on disk once the package is installed. Copy them into your agent&#8217;s discovery path \u2014 the structure is agent-agnostic, so any assistant that supports skill files can use them directly.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">\n# macOS \/ Linux \/ Windows (PowerShell) - installed npm package\ncp -r node_modules\/igniteui-react\/skills\/. .agents\/skills\/\n# Use the npx skills CLI\nnpx skills add IgniteUI\/igniteui-react\n# GitHub Copilot \u2014 copy into .agents\/skills\/\ncp -r node_modules\/igniteui-react\/skills\/igniteui-react-components .agents\/skills\/\ncp -r node_modules\/igniteui-react\/skills\/igniteui-react-customize-theme .agents\/skills\/\ncp -r node_modules\/igniteui-react\/skills\/igniteui-react-optimize-bundle-size .agents\/skills\/\n \n# Claude Code \u2014 copy into .claude\/skills\/\ncp -r node_modules\/igniteui-react\/skills\/igniteui-react-components .claude\/skills\/\ncp -r node_modules\/igniteui-react\/skills\/igniteui-react-customize-theme .claude\/skills\/\ncp -r node_modules\/igniteui-react\/skills\/igniteui-react-optimize-bundle-size .claude\/skills\/\n<\/pre>\n\n\n\n<p>For Cursor, Windsurf, and other agents, consult your agent&#8217;s documentation for the correct skills directory path \u2014 the skill files work with any assistant that supports skill-based context loading.<\/p>\n\n\n\n<p><a href=\"[AI_SKILLS_DOCS_URL]\">View LLM Agent Skills <\/a><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/ai\/skills\">documentation <\/a><a href=\"[AI_SKILLS_DOCS_URL]\">\u2192<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"grid-pdf-export\">Grid PDF Export<\/h2>\n\n\n\n<p>All four grid variants \u2014 <code>IgrGrid<\/code>, <code>IgrTreeGrid<\/code>, <code>IgrHierarchicalGrid<\/code>, and <code>IgrPivotGrid<\/code> \u2014 now support exporting data directly to PDF. The PDF export joins the existing Excel export pipeline, giving applications a native path to printable, shareable documents without a server-side rendering step. The feature is available through the <code>igniteui-react-grids<\/code> package and integrates with the existing toolbar infrastructure.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { IgrGridToolbarExporter } from 'igniteui-react-grids';\n\n\/\/ In your toolbar, PDF export is available alongside Excel export\n\n<\/pre>\n\n\n\n<p><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/grids\/grid\/export-excel\">View Grid PDF Export documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"grid-scroll-performance\">Grid Scroll Performance<\/h2>\n\n\n\n<p><code>IgrGrid<\/code>, <code>IgrTreeGrid<\/code>, <code>IgrHierarchicalGrid<\/code>, and <code>IgrPivotGrid<\/code> received a targeted set of six rendering and change-detection optimizations in 7.0. The combined result on a 100k-row dataset with 100 scroll operations: ~40\u201355 FPS vs. ~15\u201325 FPS before (100\u2013150% improvement), and Total Blocking Time reduced from ~8\u201312 seconds to ~3\u20135 seconds (50\u201360% reduction).<\/p>\n\n\n\n<p>The aggregate measured impact on benchmarked hardware (100k rows, 100 scroll operations):<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Metric<\/th><th>Before<\/th><th>After<\/th><th>Delta<\/th><\/tr><\/thead><tbody><tr><td>Long Tasks Count<\/td><td>~80\u2013120<\/td><td>~30\u201350<\/td><td><strong>\u221250% to \u221260%<\/strong><\/td><\/tr><tr><td>Avg Long Task Duration<\/td><td>~80\u2013120ms<\/td><td>~55\u201375ms<\/td><td><strong>\u221230% to \u221240%<\/strong><\/td><\/tr><tr><td>Total Blocking Time<\/td><td>~8\u201312 sec<\/td><td>~3\u20135 sec<\/td><td><strong>\u221250% to \u221260%<\/strong><\/td><\/tr><tr><td>Frames per second<\/td><td>~15\u201325 fps<\/td><td>~40\u201355 fps<\/td><td><strong>+100% to +150%<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/grids\/grid\/virtualization\">View Grid Virtualization documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"popover-api-for-dropdowns-and-dialogs\">Popover API for Dropdowns and Dialogs<\/h2>\n\n\n\n<p>Dropdown menus and dialogs now use the browser-native HTML Popover API instead of custom overlay positioning logic. The Popover API positions floating elements in the top layer, resolving longstanding z-index stacking issues in complex layouts and eliminating clipping inside overflow-hidden containers. Accessibility improves as a side effect: focus management and dismiss behavior align with browser-native expectations rather than custom implementations. This change is transparent, with no API surface changes or migration required.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/notifications\/dialog\">View Dialog documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"i18n-overhaul-and-new-igniteui-i18n-resources-package\">i18n Overhaul and New <code>igniteui-i18n-resources<\/code> Package<\/h2>\n\n\n\n<p>Grid components that render dates and numbers now use a native <code>Intl<\/code>-based pipeline, and the Calendar, DatePicker, and DateRangePicker implementations have been updated to match. A new public localization API accompanies the engine change, along with a separate <code>igniteui-i18n-resources<\/code> package containing resource strings for all currently supported languages. Applications consuming custom resource strings will need to migrate to the new package and API. See the migration guide linked below. The Combo, Chip, Input, Tree, and Carousel components are also covered under the new localization implementation.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install igniteui-i18n-resources@19.5.1\n<\/pre>\n\n\n\n<p><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/localization\">View Localization documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"breaking-changes-migration\">Breaking Changes &amp; Migration<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CSS Custom Property Prefix Rename (Themes)<\/strong><\/h3>\n\n\n\n<p>Affected: All components using CSS custom properties for theming<br>What changed: Global CSS custom property prefixes have been renamed to align with other Ignite UI libraries. Properties using the old prefix <code>[OLD_PREFIX]<\/code> must be updated to <code>[NEW_PREFIX]<\/code>.<br>Migration: Find and replace all custom property references in your stylesheets. A full list of renamed properties is available in the migration guide.<br><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/update-guide\">View migration guide<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Grid Array Mutation Detection Removed<\/strong><\/h3>\n\n\n\n<p>Affected: <code>IgrGrid<\/code>, <code>IgrTreeGrid<\/code>, <code>IgrHierarchicalGrid<\/code>, <code>IgrPivotGrid<br><\/code><code><\/code>What changed: Direct mutations to the bound <code>data<\/code> array (push, splice, index assignment) no longer trigger a re-render automatically.<br>Migration: Replace in-place mutations with a new array reference \u2014 e.g. <code>setData([...data, newRow])<\/code> instead of <code>data.push(newRow)<\/code>. This aligns with standard React immutability patterns and is the higher-impact behavioral change in this release.<br><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/update-guide\">View migration guide<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chat: <code>typingIndicator<\/code> template renderer removed<\/strong><\/h3>\n\n\n\n<p>Affected: <code>IgrChat<\/code><code><\/code>What changed: The <code>typingIndicator<\/code> template renderer prop has been removed.<br><span style=\"font-size: revert; color: initial;\">Migration: Use the <\/span><code>typing-indicator<\/code><span style=\"font-size: revert; color: initial;\"> slot instead.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tooltip: <code>disableArrow<\/code> Removed<\/strong><\/h3>\n\n\n\n<p>Affected: <code>IgrTooltip<br><\/code><code><\/code>What changed: The previously deprecated <code>disableArrow<\/code> property has been removed.<br>Migration: Remove any references to <code>disableArrow<\/code> from tooltip usage; the property had no replacement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Node.js Minimum Version: \u2265 22<\/strong><\/h3>\n\n\n\n<p>Affected: Build environments and CI pipelines<br>What changed: The minimum required Node.js version is now 22.<br>Migration: Update your Node.js runtime before upgrading. Check your CI pipeline configuration, Docker base images, and local toolchain.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"how-to-install-ignite-ui-for-react-19-5-1\">How to Install Ignite UI for React 19.5.1?<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Core package\nnpm install igniteui-react@19.5.1\n\n# Grids package (required for all grid components)\nnpm install igniteui-react-grids@19.5.1\n\n# New: localization resources package\nnpm install igniteui-i18n-resources@19.5.1\n<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.npmjs.com\/package\/igniteui-react\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/npm\/v\/igniteui-react.svg\" alt=\"igniteui-react on npm\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"get-started-with-ignite-ui-for-react-19-5-1\">Get Started with Ignite UI for React 19.5.1<\/h2>\n\n\n\n<p>Update your project today and follow the getting started guide to access AI Copilot Skills, Grid PDF Export, and the new i18n API and review the migration guide before upgrading if you use grid data binding, the Chat component, or CSS custom properties for theming.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/general-changelog-dv-react\">Release Notes &amp; Full Changelog<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/general-getting-started\">Getting Started Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/ai\/theming-mcp\">AI-Assisted Development Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-react\/discussions\" rel=\"noopener\">GitHub Discussions<\/a><\/li>\n<\/ul>\n\n\n<p><!--\nSTRUCTURED_RELEASE_METADATA\nproduct: Ignite UI for React\nversion: 19.5.1\nrelease_date: 2026-02-01\nframework: React\npackage_manager: npm\npackage_name: igniteui-react\ninstall_command: npm install igniteui-react@19.5.1\nsecondary_packages: igniteui-react-grids@19.5.1, igniteui-i18n-resources@19.5.1\nchangelog_url: https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/general-changelog-dv-react#1951\ndocs_url: https:\/\/www.infragistics.com\/products\/ignite-ui-react\/react\/components\/general-getting-started\nnew_components: []\nnew_features: [LLMAgentSkills, GridPDFExport, GridScrollPerformance, PopoverAPI, i18nOverhaul]\nbreaking_changes: true\nbreaking_change_summary: CSS custom property prefixes renamed; grid array mutation detection removed; Chat typingIndicator renderer removed; Tooltip disableArrow removed; Node.js minimum version raised to 22\nmin_node_version: 22\ntags: [react, data-grid, pdf-export, i18n, localization, copilot-skills, ai, performance, popover, theming, accessibility]\nEND_METADATA\n--><\/p>","protected":false},"excerpt":{"rendered":"<p>From Grid PDF Export, allowing you to export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to new Intl-based rendering pipeline and more. Here are the latest updates in your toolbox.<\/p>\n","protected":false},"author":20,"featured_media":3357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,9],"tags":[20,43,25,42],"class_list":["post-3612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","category-react","tag-ignite-ui","tag-ignite-ui-for-react","tag-react","tag-whats-new"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=3612"}],"version-history":[{"count":32,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3612\/revisions"}],"predecessor-version":[{"id":3676,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3612\/revisions\/3676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/3357"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}