{"id":3564,"date":"2026-03-05T09:14:26","date_gmt":"2026-03-05T09:14:26","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=3564"},"modified":"2026-03-06T09:03:03","modified_gmt":"2026-03-06T09:03:03","slug":"ignite-ui-for-web-components-7-0-0","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-for-web-components-7-0-0","title":{"rendered":"Ignite UI for Web Components 7.0.0: What&#8217;s New?"},"content":{"rendered":"\n<p>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\u201360% and more than doubles frames per second at 100k rows. Run <code>npm install igniteui-webcomponents@7.0.0<\/code> to upgrade.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default release-summary-callout is-layout-flow wp-block-quote-is-layout-flow\">\n<ul class=\"wp-block-list\">\n\n<li class=\"mb-3\"><strong>AI Coding Skills<\/strong>: four agent skill files ship inside the npm package; the framework integration skill branches per host (Angular, React via <code>igniteui-react<\/code>, Vue, vanilla JS) and covers the integration gotchas agents consistently miss without it.<\/li>\n\n\n\n<li class=\"mb-3\"><strong>Grid Scroll Performance<\/strong>: 100\u2013150% FPS improvement and 50\u201360% reduction in Total Blocking Time at 100k rows, driven by six targeted rendering and change-detection optimizations ported from Angular grids.<\/li>\n\n\n\n<li class=\"mb-3\"><strong>Grid PDF Exporter<\/strong>: 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.<\/li>\n\n\n\n<li class=\"mb-3\"><strong>Breaking changes<\/strong>: CSS theme custom property prefixes renamed globally \u2014 update stylesheet overrides before upgrading; <code>Chat<\/code> <code>typingIndicator<\/code> renderer removed (use <code>typing-indicator<\/code> slot); <code>Tooltip<\/code> <code>disableArrow<\/code> removed; Node.js minimum is now 22.<\/li>\n\n\n\n<li class=\"mb-3\"><code>npm install igniteui-webcomponents@7.0.0<\/code><br><code>npm install igniteui-webcomponents-grids@7.0.0<\/code> \u2014 required for Grid, Tree Grid, Hierarchical Grid, Pivot Grid<\/li>\n\n\n<\/ul>\n\n\n<p style=\"font-size: 1rem;\">Check out <a href=\"https:\/\/github.com\/IgniteUI\/igniteui-webcomponents\/blob\/master\/CHANGELOG.md\" rel=\"noopener\">full changelog<\/a> here.<\/p>\n\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"ai-coding-skills\">AI Coding Skills<\/h2>\n\n\n\n<p>Ignite UI for Web Components 7.0 ships four AI skill files directly inside the npm package under <code>skills\/<\/code>. 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.<\/p>\n\n\n\n<p>The four skills each address a distinct agent failure pattern. <strong>igniteui-wc-choose-components<\/strong> prevents agents from reaching for the wrong component (e.g. a native <code>&lt;select&gt;<\/code> when <code>igc-combo<\/code> is the correct pick). <strong>igniteui-wc-integrate-with-framework<\/strong> is the most structurally complex skill \u2014 it branches per host environment and carries knowledge that agents reliably get wrong without it. <strong>igniteui-wc-customize-component-theme<\/strong> covers CSS custom properties, <code>::part()<\/code> exposure, and the theming MCP server. <strong>igniteui-wc-optimize-bundle-size<\/strong> steers agents away from <code>defineAllComponents()<\/code> and toward selective registration.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Without the skill<\/th><th>With the skill<\/th><th>Framework<\/th><\/tr><\/thead><tbody><tr><td>Agent omits <code>CUSTOM_ELEMENTS_SCHEMA<\/code> \u2192 Angular template error on every <code>igc-*<\/code> tag<\/td><td>Schema added to standalone component or NgModule automatically<\/td><td>Angular<\/td><\/tr><tr><td>Agent skips <code>isCustomElement<\/code> config \u2192 Vue warns &#8220;Unknown custom element&#8221; for all components<\/td><td><code>vite.config.ts<\/code> \/ <code>vue.config.js<\/code> configured correctly<\/td><td>Vue<\/td><\/tr><tr><td>Agent passes object\/array as HTML attribute \u2192 silently ignored, component shows no data<\/td><td>JS property assignment used for complex types; attribute strings for primitives only<\/td><td>All<\/td><\/tr><tr><td>Agent calls <code>defineComponents()<\/code> after DOM insertion \u2192 element upgrades never fire<\/td><td>Registration happens in entry point before any template renders<\/td><td>Vanilla JS<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>One integration pattern stands apart: React. Every other host framework uses <code>igniteui-webcomponents<\/code> directly, with <code>defineComponents()<\/code> and <code>igc-*<\/code> HTML tags. React uses the separate <a href=\"https:\/\/www.npmjs.com\/package\/igniteui-react\" rel=\"noopener\"><code>igniteui-react<\/code><\/a> package, which provides fully typed React wrappers (<code>IgrButton<\/code>, <code>IgrInput<\/code>, <code>IgrCombo<\/code> \u2014 note the <code>Igr<\/code> prefix), camelCase props, and standard React event handling instead of the <code>igcChange<\/code> \/ <code>igcInput<\/code> custom event names. The skill routes agents to the correct package and component prefix automatically.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Angular \/ Vue \/ Vanilla JS \u2014 uses <code>igniteui-webcomponents<\/code>, <code>igc-*<\/code> tags<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\n\/\/ Angular \/ Vue \/ Vanilla: same package, igc-* tags, defineComponents(), prefixed custom events\nimport { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';\ndefineComponents(IgcInputComponent);\n\/\/ Template: <igc-input label=\"Name\" required (igcChange)=\"handler($event)\"><\/igc-input>\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Architecture: Lean Brain + Executable References<\/h3>\n\n\n\n<p>Only <code>igniteui-wc-integrate-with-framework<\/code> carries a <code>references\/<\/code> subdirectory, because it is the only skill that branches on a dimension \u2014 host framework \u2014 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 <code>SKILL.md<\/code> entry point in every skill acts as the agent&#8217;s routing layer: intent detection, task classification, and pointers to where detailed knowledge lives. It is never a dump of API documentation \u2014 a 4,000-line wall of docs is a context window tax, not a skill.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">skills\/\n    igniteui-wc-choose-components\/\n    \u2514\u2500\u2500 SKILL.md                  \u2190 brain: match UI pattern to component name (&lt;500 lines)\n    igniteui-wc-integrate-with-framework\/\n    \u251c\u2500\u2500 SKILL.md                  \u2190 brain: detect host framework + route to reference (&lt;500 lines)\n    \u2514\u2500\u2500 references\/\n        \u251c\u2500\u2500 angular.md            \u2190 CUSTOM_ELEMENTS_SCHEMA, defineComponents() in main.ts,\n        \u2502                            [] property binding, (igcChange) event syntax\n        \u251c\u2500\u2500 react.md              \u2190 igniteui-react package (Igr* wrappers), camelCase props,\n        \u2502                            native React events, no schema config needed\n        \u251c\u2500\u2500 vue.md                \u2190 isCustomElement in vite.config \/ vue.config,\n        \u2502                            @igcChange events, template refs for complex data\n        \u2514\u2500\u2500 vanilla-js.md         \u2190 defineComponents() before DOM, HTML attributes vs\n                                     JS property assignment for objects\/arrays\n    igniteui-wc-customize-component-theme\/\n    \u2514\u2500\u2500 SKILL.md                  \u2190 brain: CSS custom properties, ::part(), configureTheme() (&lt;500 lines)\n    igniteui-wc-optimize-bundle-size\/\n    \u2514\u2500\u2500 SKILL.md                  \u2190 brain: selective imports, lazy loading, tree-shaking (&lt;500 lines)<\/pre>\n\n\n\n<p>To activate the skills, copy the folders into the directory your agent tooling watches. Copilot discovers skills from <code>.github\/skills\/<\/code> or <code>.claude\/skills\/<\/code> in the repository. Claude Desktop and Claude Code users can reference them via project knowledge or <code>CLAUDE.md<\/code>. Personal skills can be stored in <code>~\/.copilot\/skills\/<\/code> or <code>~\/.claude\/skills\/<\/code> and are shared across projects.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">\n# Unix \/ macOS\ncp -r node_modules\/igniteui-webcomponents\/skills\/* .github\/skills\/\n# Windows (PowerShell)\nCopy-Item -Recurse node_modules\\igniteui-webcomponents\\skills\\* .github\\skills\\\n# Windows (Command Prompt)\nxcopy \/E \/I node_modules\\igniteui-webcomponents\\skills .github\\skills\n<\/pre>\n\n\n\n<p>Here&#8217;s the <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/ai\/skills\">AI-Assisted Development 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>IgcGrid<\/code>, <code>IgcTreeGrid<\/code>, and <code>IgcHierarchicalGrid<\/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>No API changes are required to benefit from these improvements. The optimizations apply automatically to any grid bound to a data source.<\/p>\n\n\n\n<p>Here&#8217;s the <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/grids\/tree-grid\/virtualization\">Grid virtualization and performance documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"grid-pdf-exporter\">Grid PDF Exporter<\/h2>\n\n\n\n<p>Grid data can now be exported to PDF directly from the Web Components grid family \u2014 no third-party library wiring required.<\/p>\n\n\n\n<p>The <code>IgcPdfExporterService<\/code> 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 \u2014 or you override those flags via <code>IgcPdfExporterOptions<\/code> to export the full dataset regardless of view state.<\/p>\n\n\n\n<p><p>Grid components ship in a separate package. Install it alongside the core package before using any grid or exporter API:<\/p>\n\n\n\n<p>For full programmatic control, wire the exporter service directly:<\/p><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\nimport { IgcPdfExporterService, IgcPdfExporterOptions } from 'igniteui-webcomponents-grids\/core';\nconst exporter = new IgcPdfExporterService();\nconst options = new IgcPdfExporterOptions('SalesReport');\noptions.pageOrientation = 'landscape';\noptions.pageSize = 'a4';\noptions.showTableBorders = true;\nconst grid = document.querySelector('igc-grid');\nexporter.export(grid, options);\n<\/pre>\n\n\n\n<p>For most grids, the easier path is enabling the PDF button directly on the toolbar component \u2014 no manual service wiring required:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\n<igc-grid-toolbar>\n  <igc-grid-toolbar-exporter\n    export-pdf=\"true\"\n    export-excel=\"true\"\n    export-csv=\"true\">\n  <\/igc-grid-toolbar-exporter>\n<\/igc-grid-toolbar>\n<\/pre>\n\n\n\n<p>Here&#8217;s the <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/grids\/grid\/export-excel\">Grid PDF Exporter 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<p><strong>CSS theme custom property prefixes renamed globally<\/strong><br>\nAffected: all components \u2014 any stylesheet that overrides component theme variables<br>\nWhat changed: global CSS custom property prefixes for component themes have been renamed to align with Ignite UI for Angular, React, and Blazor naming conventions.<br>\nMigration: search your stylesheets for <code>--igc-*<\/code> theme overrides and update them to the new prefix. The full rename table is in the changelog.<br>\n<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-webcomponents\/blob\/master\/CHANGELOG.md\" rel=\"noopener\">View full prefix rename table in changelog \u2192<\/a><\/p>\n\n\n\n<p><strong>Chat: <code>typingIndicator<\/code> template renderer removed<\/strong><br>\nAffected: <code>IgcChatComponent<\/code><br>\nWhat changed: the <code>typingIndicator<\/code> renderer API has been removed.<br>\nMigration: replace with the <code>typing-indicator<\/code> slot.<\/p>\n\n\n\n<p><strong>Tooltip: <code>disableArrow<\/code> property removed<\/strong><br>\nAffected: <code>IgcTooltipComponent<\/code><br>\nWhat changed: the previously deprecated <code>disableArrow<\/code> property has been removed.<br>\nMigration: use CSS custom properties or the <code>::part(arrow)<\/code> CSS part to control arrow visibility.<\/p>\n\n\n\n<p><strong>Node.js minimum version is now 22<\/strong><br>\nAffected: build environments, CI pipelines<br>\nWhat changed: the package no longer supports Node versions below 22.<br>\nMigration: run <code>node --version<\/code> and upgrade before installing 7.0.0.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>No additional breaking changes in this release beyond the four listed above.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"how-to-get-started\">How to Get Started<\/h2>\n\n\n\n<p>Install or upgrade Ignite UI for Web Components today:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">\n# Requires Node.js >= 22\n# Core components\nnpm install igniteui-webcomponents@7.0.0\n# Grid components (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid)\nnpm install igniteui-webcomponents-grids@7.0.0\n<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.npmjs.com\/package\/igniteui-webcomponents\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/npm\/v\/igniteui-webcomponents.svg\" alt=\"igniteui-webcomponents on npm\"\/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-webcomponents\/blob\/master\/CHANGELOG.md\" rel=\"noopener\">Release Notes &amp; Full Changelog<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/general-getting-started\">Getting Started Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/ai\/skills\">AI-Assisted Development Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-webcomponents\/discussions\" rel=\"noopener\">GitHub Discussions<\/a><\/li>\n<\/ul>\n\n\n<p><!--\nSTRUCTURED_RELEASE_METADATA\nproduct: Ignite UI for Web Components\nversion: 7.0.0\nrelease_date: 2026-02-25\nframework: Web Components (framework-agnostic)\npackage_manager: npm\npackage_name: igniteui-webcomponents\ngrids_package_name: igniteui-webcomponents-grids\ninstall_command: npm install igniteui-webcomponents@7.0.0\ngrids_install_command: npm install igniteui-webcomponents-grids@7.0.0\nchangelog_url: https:\/\/github.com\/IgniteUI\/igniteui-webcomponents\/blob\/master\/CHANGELOG.md\ndocs_url: https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/general\/getting-started\nnew_components: []\nnew_features: [AICodingSkills, GridScrollPerformance, GridPDFExporter, ChatAdoptRootStylesRuntime]\nbreaking_changes: true\nbreaking_change_summary: CSS theme custom property prefixes renamed globally; Chat typingIndicator renderer removed (use typing-indicator slot); Tooltip disableArrow removed; Node.js minimum is now 22\nmin_node_version: 22\nai_skills: [igniteui-wc-choose-components, igniteui-wc-integrate-with-framework, igniteui-wc-customize-component-theme, igniteui-wc-optimize-bundle-size]\nai_skills_discovery_paths: [.github\/skills\/, .claude\/skills\/, ~\/.copilot\/skills\/, ~\/.claude\/skills\/]\nai_skills_docs_url: https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/ai\/skills\ntheming_mcp_docs_url: https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/ai\/theming-mcp\npdf_exporter_docs_url: https:\/\/www.infragistics.com\/products\/ignite-ui-web-components\/web-components\/components\/grids\/data-grid\/export-pdf\nreact_package: igniteui-react\nreact_component_prefix: Igr\nscroll_perf_fps_before: 15-25\nscroll_perf_fps_after: 40-55\nscroll_perf_fps_delta: +100% to +150%\nscroll_perf_tbt_before_sec: 8-12\nscroll_perf_tbt_after_sec: 3-5\nscroll_perf_tbt_reduction_percent: 50-60\nscroll_perf_long_task_reduction_percent: 50-60\nscroll_perf_dataset: 100k rows, 100 scroll operations\nscroll_perf_technique_css: transform translateY (GPU-accelerated, no reflow)\nscroll_perf_technique_throttle: 40ms dynamic scroll event throttle (~25 events\/sec vs 60+)\ntags: [web-components, custom-elements, data-grid, pdf-export, ai-skills, performance, mcp, github-copilot, cursor, claude, scroll-virtualization, theming, node-22, react, angular, vue, vanilla-js]\nEND_METADATA\n--><\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From AI Coding Skills, covering component selection, framework integration, theming, and bundle optimization to improved Grid scroll performance, and more.<\/p>\n","protected":false},"author":20,"featured_media":1620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,12],"tags":[36,20,21,42],"class_list":["post-3564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-components","category-product-updates","tag-app-development","tag-ignite-ui","tag-ignite-ui-web-components","tag-whats-new"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3564","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=3564"}],"version-history":[{"count":27,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3564\/revisions"}],"predecessor-version":[{"id":3611,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3564\/revisions\/3611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1620"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}