Ignite UI for Web Components 7.0.0: What’s New?

Ignite UI for Web Components 7.0 is now available on npm. This release advances Web Components as a first-class citizen in the Infragistics AI-Assisted Development story, shipping four dedicated coding skills for AI agents, a Grid PDF Exporter, and a scroll performance overhaul that cuts Total Blocking Time by 50–60% and more than doubles frames per second at 100k rows. Run npm install igniteui-webcomponents@7.0.0 to upgrade.

• AI Coding Skills: four agent skill files ship inside the npm package; the framework integration skill branches per host (Angular, React via igniteui-react, Vue, vanilla JS) and covers the integration gotchas agents consistently miss without it.
• Grid Scroll Performance: 100–150% FPS improvement and 50–60% reduction in Total Blocking Time at 100k rows, driven by six targeted rendering and change-detection optimizations ported from Angular grids.
• Grid PDF Exporter: export Data Grid, Tree Grid, and Hierarchical Grid to multi-page PDF with automatic page breaks, column group headers, and summary rows; also available as a one-attribute addition to the toolbar component.
• Breaking changes: CSS theme custom property prefixes renamed globally — update stylesheet overrides before upgrading; Chat typingIndicator renderer removed (use typing-indicator slot); Tooltip disableArrow removed; Node.js minimum is now 22.
• npm install igniteui-webcomponents@7.0.0
npm install igniteui-webcomponents-grids@7.0.0 — required for Grid, Tree Grid, Hierarchical Grid, Pivot Grid

Check out full changelog here.

AI Coding Skills

Ignite UI for Web Components 7.0 ships four AI skill files directly inside the npm package under skills/. Each skill is a structured guidance file that teaches GitHub Copilot, Claude, Cursor, and other LLM coding agents how to handle a specific class of task with this library.

The four skills each address a distinct agent failure pattern. igniteui-wc-choose-components prevents agents from reaching for the wrong component (e.g. a native <select> when igc-combo is the correct pick). igniteui-wc-integrate-with-framework is the most structurally complex skill — it branches per host environment and carries knowledge that agents reliably get wrong without it. igniteui-wc-customize-component-theme covers CSS custom properties, ::part() exposure, and the theming MCP server. igniteui-wc-optimize-bundle-size steers agents away from defineAllComponents() and toward selective registration.

Without the skill	With the skill	Framework
Agent omits CUSTOM_ELEMENTS_SCHEMA → Angular template error on every igc-* tag	Schema added to standalone component or NgModule automatically	Angular
Agent skips isCustomElement config → Vue warns “Unknown custom element” for all components	vite.config.ts / vue.config.js configured correctly	Vue
Agent passes object/array as HTML attribute → silently ignored, component shows no data	JS property assignment used for complex types; attribute strings for primitives only	All
Agent calls defineComponents() after DOM insertion → element upgrades never fire	Registration happens in entry point before any template renders	Vanilla JS

One integration pattern stands apart: React. Every other host framework uses igniteui-webcomponents directly, with defineComponents() and igc-* HTML tags. React uses the separate igniteui-react package, which provides fully typed React wrappers (IgrButton, IgrInput, IgrCombo — note the Igr prefix), camelCase props, and standard React event handling instead of the igcChange / igcInput custom event names. The skill routes agents to the correct package and component prefix automatically.

Angular / Vue / Vanilla JS — uses igniteui-webcomponents, igc-* tags

// Angular / Vue / Vanilla: same package, igc-* tags, defineComponents(), prefixed custom events
import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
defineComponents(IgcInputComponent);
// Template: 

Architecture: Lean Brain + Executable References

Only igniteui-wc-integrate-with-framework carries a references/ subdirectory, because it is the only skill that branches on a dimension — host framework — where a single flat file would be unworkably long. The other three skills are single-brain files, each scoped to a domain narrow enough to stay under 500 lines. The SKILL.md entry point in every skill acts as the agent’s routing layer: intent detection, task classification, and pointers to where detailed knowledge lives. It is never a dump of API documentation — a 4,000-line wall of docs is a context window tax, not a skill.

skills/
    igniteui-wc-choose-components/
    └── SKILL.md                  ← brain: match UI pattern to component name (<500 lines)
    igniteui-wc-integrate-with-framework/
    ├── SKILL.md                  ← brain: detect host framework + route to reference (<500 lines)
    └── references/
        ├── angular.md            ← CUSTOM_ELEMENTS_SCHEMA, defineComponents() in main.ts,
        │                            [] property binding, (igcChange) event syntax
        ├── react.md              ← igniteui-react package (Igr* wrappers), camelCase props,
        │                            native React events, no schema config needed
        ├── vue.md                ← isCustomElement in vite.config / vue.config,
        │                            @igcChange events, template refs for complex data
        └── vanilla-js.md         ← defineComponents() before DOM, HTML attributes vs
                                     JS property assignment for objects/arrays
    igniteui-wc-customize-component-theme/
    └── SKILL.md                  ← brain: CSS custom properties, ::part(), configureTheme() (<500 lines)
    igniteui-wc-optimize-bundle-size/
    └── SKILL.md                  ← brain: selective imports, lazy loading, tree-shaking (<500 lines)

To activate the skills, copy the folders into the directory your agent tooling watches. Copilot discovers skills from .github/skills/ or .claude/skills/ in the repository. Claude Desktop and Claude Code users can reference them via project knowledge or CLAUDE.md. Personal skills can be stored in ~/.copilot/skills/ or ~/.claude/skills/ and are shared across projects.

# Unix / macOS
cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/
# Windows (PowerShell)
Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\
# Windows (Command Prompt)
xcopy /E /I node_modules\igniteui-webcomponents\skills .github\skills

Here’s the AI-Assisted Development documentation.

Grid Scroll Performance

IgcGrid, IgcTreeGrid, and IgcHierarchicalGrid 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%

No API changes are required to benefit from these improvements. The optimizations apply automatically to any grid bound to a data source.

Here’s the Grid virtualization and performance documentation.

Grid PDF Exporter

Grid data can now be exported to PDF directly from the Web Components grid family — no third-party library wiring required.

The IgcPdfExporterService targets Data Grid, Tree Grid, and Hierarchical Grid and produces multi-page documents with automatic page breaks, column group headers, summary rows, and landscape orientation by default. It respects the current filter, sort, and column visibility state so the document matches what the user sees on screen — or you override those flags via IgcPdfExporterOptions to export the full dataset regardless of view state.

Grid components ship in a separate package. Install it alongside the core package before using any grid or exporter API:

For full programmatic control, wire the exporter service directly:

import { IgcPdfExporterService, IgcPdfExporterOptions } from 'igniteui-webcomponents-grids/core';
const exporter = new IgcPdfExporterService();
const options = new IgcPdfExporterOptions('SalesReport');
options.pageOrientation = 'landscape';
options.pageSize = 'a4';
options.showTableBorders = true;
const grid = document.querySelector('igc-grid');
exporter.export(grid, options);

For most grids, the easier path is enabling the PDF button directly on the toolbar component — no manual service wiring required:

Here’s the Grid PDF Exporter documentation.

Breaking Changes & Migration

CSS theme custom property prefixes renamed globally
Affected: all components — any stylesheet that overrides component theme variables
What changed: global CSS custom property prefixes for component themes have been renamed to align with Ignite UI for Angular, React, and Blazor naming conventions.
Migration: search your stylesheets for --igc-* theme overrides and update them to the new prefix. The full rename table is in the changelog.
View full prefix rename table in changelog →

Chat: typingIndicator template renderer removed
Affected: IgcChatComponent
What changed: the typingIndicator renderer API has been removed.
Migration: replace with the typing-indicator slot.

Tooltip: disableArrow property removed
Affected: IgcTooltipComponent
What changed: the previously deprecated disableArrow property has been removed.
Migration: use CSS custom properties or the ::part(arrow) CSS part to control arrow visibility.

Node.js minimum version is now 22
Affected: build environments, CI pipelines
What changed: the package no longer supports Node versions below 22.
Migration: run node --version and upgrade before installing 7.0.0.

No additional breaking changes in this release beyond the four listed above.

How to Get Started

Install or upgrade Ignite UI for Web Components today:

# Requires Node.js >= 22
# Core components
npm install igniteui-webcomponents@7.0.0
# Grid components (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid)
npm install igniteui-webcomponents-grids@7.0.0

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