Ignite UI for React 19.5.1: What’s New?

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.

All the updates in Ignite UI for React 19.5.1 at a glance:

• LLM Agent Skills: 3 React-specific skill files ship inside the npm package, giving GitHub Copilot and other LLM agents step-by-step guidance for common tasks
• Grid PDF Export: export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to PDF
• Grid Scroll Performance: dynamic scroll throttle adjustment based on rendered data reduces jank in large datasets
• Popover API: dropdowns and dialogs now use the HTML Popover API for better positioning and accessibility
• i18n Overhaul: new Intl-based rendering pipeline, updated localization for all supported languages, and a new igniteui-i18n-resources package with a public API
• Breaking: CSS custom property prefixes renamed; grid array mutation detection changed; Chat slot API updated; Tooltip disableArrow removed; Node.js ≥ 22 required

npm install igniteui-react@19.5.1
npm install igniteui-react-grids@19.5.1

Access the full changelog here.

LLM Agent Skills

Three LLM Agent Skills now ship inside the igniteui-react npm package under the skills/ directory, teaching GitHub Copilot, Cursor, Windsurf, Claude Code, and other LLM-powered agents the correct Igr* components, import paths, JSX patterns, and styling approaches — all specific to React and the igniteui-react package family.

Each Skill is a self-contained markdown file with step-by-step instructions, code examples, and a reference/ subdirectory of supporting material. Wire them into your agent once per project and every session follows your standards automatically.

Skill	What it covers	Use when
igniteui-react-components	Identify the right Igr* component for a UI pattern, then install, import, and use it — JSX patterns, events, refs, forms	Choosing components or setting up and using them in React
igniteui-react-customize-theme	Customize styling using CSS custom properties, Sass, and the Ignite UI theming system in a React context	Applying custom brand colors or styles
igniteui-react-optimize-bundle-size	Reduce bundle size with granular imports, tree-shaking, and lazy loading	Optimizing production performance

Getting the Skills into your IDE

Skills are already on disk once the package is installed. Copy them into your agent’s discovery path — the structure is agent-agnostic, so any assistant that supports skill files can use them directly.

# macOS / Linux / Windows (PowerShell) - installed npm package
cp -r node_modules/igniteui-react/skills/. .agents/skills/
# Use the npx skills CLI
npx skills add IgniteUI/igniteui-react
# GitHub Copilot — copy into .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/
 
# Claude Code — copy into .claude/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-components .claude/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .claude/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .claude/skills/

For Cursor, Windsurf, and other agents, consult your agent’s documentation for the correct skills directory path — the skill files work with any assistant that supports skill-based context loading.

View LLM Agent Skills documentation →

Grid PDF Export

All four grid variants — IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid — 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 igniteui-react-grids package and integrates with the existing toolbar infrastructure.

import { IgrGridToolbarExporter } from 'igniteui-react-grids';

// In your toolbar, PDF export is available alongside Excel export

View Grid PDF Export documentation

Grid Scroll Performance

IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid 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–55 FPS vs. ~15–25 FPS before (100–150% improvement), and Total Blocking Time reduced from ~8–12 seconds to ~3–5 seconds (50–60% reduction).

The aggregate measured impact on benchmarked hardware (100k rows, 100 scroll operations):

Metric	Before	After	Delta
Long Tasks Count	~80–120	~30–50	−50% to −60%
Avg Long Task Duration	~80–120ms	~55–75ms	−30% to −40%
Total Blocking Time	~8–12 sec	~3–5 sec	−50% to −60%
Frames per second	~15–25 fps	~40–55 fps	+100% to +150%

View Grid Virtualization documentation

Popover API for Dropdowns and Dialogs

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.

View Dialog documentation

i18n Overhaul and New igniteui-i18n-resources Package

Grid components that render dates and numbers now use a native Intl-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 igniteui-i18n-resources 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.

npm install igniteui-i18n-resources@19.5.1

View Localization documentation

Breaking Changes & Migration

CSS Custom Property Prefix Rename (Themes)

Affected: All components using CSS custom properties for theming
What changed: Global CSS custom property prefixes have been renamed to align with other Ignite UI libraries. Properties using the old prefix [OLD_PREFIX] must be updated to [NEW_PREFIX].
Migration: Find and replace all custom property references in your stylesheets. A full list of renamed properties is available in the migration guide.
View migration guide

Grid Array Mutation Detection Removed

Affected: IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, IgrPivotGrid
What changed: Direct mutations to the bound data array (push, splice, index assignment) no longer trigger a re-render automatically.
Migration: Replace in-place mutations with a new array reference — e.g. setData([...data, newRow]) instead of data.push(newRow). This aligns with standard React immutability patterns and is the higher-impact behavioral change in this release.
View migration guide

Chat: typingIndicator template renderer removed

Affected: IgrChatWhat changed: The typingIndicator template renderer prop has been removed.
Migration: Use the typing-indicator slot instead.

Tooltip: disableArrow Removed

Affected: IgrTooltip
What changed: The previously deprecated disableArrow property has been removed.
Migration: Remove any references to disableArrow from tooltip usage; the property had no replacement.

Node.js Minimum Version: ≥ 22

Affected: Build environments and CI pipelines
What changed: The minimum required Node.js version is now 22.
Migration: Update your Node.js runtime before upgrading. Check your CI pipeline configuration, Docker base images, and local toolchain.

How to Install Ignite UI for React 19.5.1?

# Core package
npm install igniteui-react@19.5.1

# Grids package (required for all grid components)
npm install igniteui-react-grids@19.5.1

# New: localization resources package
npm install igniteui-i18n-resources@19.5.1

Get Started with Ignite UI for React 19.5.1

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.

• Release Notes & Full Changelog
• Getting Started Guide
• AI-Assisted Development Guide
• GitHub Discussions