Ignite UI for Web Components 7.2 is now available on npm. This release advances the library's AI toolchain on two fronts: updated LLM Agent Skills ship inside the npm package, and the Ignite UI CLI MCP server gains Web Components documentation access and scaffolding support. For engineering teams, that means faster onboarding, less hand-written integration code, and fewer inconsistencies across projects when developers or AI assistants implement common patterns. Platform-side, the Invoker Commands API eliminates JavaScript boilerplate for common show/hide/toggle patterns, and the Popover API integration extends to Nav Drawer, Snackbar, and Toast. Run `npm install igniteui-webcomponents@7.2.0` to upgrade.
---
> **What's new in Ignite UI Web Components 7.2**
>
> - **LLM Agent Skills (updated)** - five in-package skills teach AI agents component selection, framework integration, theming, design-to-code, and bundle optimization
> - **CLI MCP Server: Web Components support** - `ig mcp` now serves WC component docs, full API reference, and scaffolding guidance to any connected AI assistant
> - **Invoker Commands API** - declarative `--show`, `--hide`, `--toggle` for five components via `command` and `commandfor` attributes, no JavaScript required
> - **Platform Popover Upgrades** - Nav Drawer moves to native Popover API; Snackbar and Toast gain top-layer `positioning` property
> - **Date Range Picker inline editing** - edit range value directly via a single input field
> - ⚠️ **Nav Drawer `overlay` CSS part removed** - target `base::backdrop` or `--ig-overlay-background-color` instead
>
> 📦 `npm install igniteui-webcomponents@7.2.0`
> 📄 [Full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md)
---
## LLM Agent Skills
Five LLM Agent Skills ship inside the `igniteui-webcomponents` npm package under the `skills/` directory. Each is a self-contained SKILL.md file with step-by-step instructions, code examples, and framework-specific patterns - structured so AI agents can retrieve and apply them consistently.
The preferred way to add the Ignite UI AI toolchain (Skills & MCP servers' configuration) to an existing project is `ig ai-config`. Agent toolchains evolve rapidly; `ig ai-config` is designed to be idempotent - you can run it on every release cycle to apply the latest skills without overwriting your team's custom agent instructions. It copies compatible skills into the appropriate discovery path, merges MCP server entries, and updates the baseline instructions in one step.
| Skill | Use when |
|---|---|
| `igniteui-wc-choose-components` | Identifying the right component for a UI pattern and navigating to docs |
| `igniteui-wc-integrate-with-framework` | Setting up components in React, Angular, Vue, or vanilla JS |
| `igniteui-wc-customize-component-theme` | Applying custom styles via CSS custom properties, parts, or the theming system |
| `igniteui-wc-generate-from-image-design` | Implementing a view from a screenshot or design mockup |
| `igniteui-wc-optimize-bundle-size` | Reducing production bundle size via selective imports and lazy loading |
If you want to set up skills manually instead, copy them into your repository's `.github/skills/` directory so compatible agents can discover them for this project:
```bash
# Unix / macOS
cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/
# Windows (PowerShell)
Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\
```
The skills are compatible with GitHub Copilot, Cursor, Windsurf, Claude, JetBrains Junie, and Gemini CLI. Discovery paths vary by agent - consult your agent's documentation for the correct directory. The `integrate-with-framework` skill is particularly useful for Web Components: it branches per host (React via `igniteui-react` wrappers, Angular, Vue, vanilla JS) and covers the integration patterns agents consistently miss without explicit guidance.
[AI-Assisted Development documentation →](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/ai/skills)
---
## CLI MCP Server: Web Components Documentation & Scaffolding
The Ignite UI CLI bundles an MCP (Model Context Protocol) server that gives any connected AI assistant direct access to Ignite UI documentation, API reference, and project scaffolding guidance. Web Components components, templates, and documentation are fully supported.
The recommended setup path is `ig ai-config`, which adds the AI toolchain to an existing project by copying compatible skills into agent discovery path(s), generating agent instruction files, and configuring MCP server entries automatically. For step-by-step manual setup, install the CLI, run `ig ai-config` to register MCP server entries, then start the servers:
```bash
# Requires igniteui-cli 15.0.0 or newer
npm install -g igniteui-cli
# Configure the MCP servers
ig ai-config
# Start the MCP servers
ig mcp
```
```json
{
"mcpServers": {
"igniteui-cli": {
"command": "npx",
"args": [
"-y",
"igniteui-cli",
"mcp"
]
},
"igniteui-theming": {
"command": "npx",
"args": [
"-y",
"igniteui-theming",
"igniteui-theming-mcp"
]
}
}
}
```
Once connected, two MCP servers are available to your assistant. The CLI MCP exposes six tools: `list_components`, `get_doc`, `search_docs`, `get_api_reference`, `search_api`, and `generate_ignite_app` - for Web Components this means on-demand documentation for any `igc-*` component, exact API signatures, and tailored project scaffolding. The Theming MCP provides design token access, CSS custom property generation, and WCAG AA contrast validation.
This is where the Skills and the MCP complement each other. Skills teach the agent how to use Ignite UI Web Components correctly: which patterns apply per framework, how theming works, how to read a design and map it to components. The MCP gives the agent what to say when the question is specific - the exact property signature for `IgcGridComponent`, the current list of available date picker slots, the correct import path for a given version. One layer provides reasoning context; the other provides factual recall.
The CLI also scaffolds new Web Components projects and adds component templates:
```bash
# New project - AI toolchain configured from the start (interactive)
ig new
# Or specify framework and name directly
ig new "My App" --framework=webcomponents
# Add a component template interactively
ig add
```
[Getting Started with Ignite UI Web Components →](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
---
## Invoker Commands API
`igc-button` and `igc-icon-button` now support `command` and `commandfor` attributes, enabling declarative show/hide/toggle control of target components without JavaScript. Assign a command - `--show`, `--hide`, or `--toggle` - and point `commandfor` at the target component's `id`.
```html
<!-- No event listeners, no querySelector, no .show() call -->
<igc-button command="--toggle" commandfor="main-drawer">
Open Menu
</igc-button>
<igc-nav-drawer id="main-drawer">
<!-- navigation content -->
</igc-nav-drawer>
```
Five components respond to these commands: `igc-banner`, `igc-dialog`, `igc-nav-drawer`, `igc-snackbar`, and `igc-toast`. For Web Components - which are used across Angular, React, Vue, and vanilla JS without a shared component lifecycle - declarative commands are the cleanest cross-host solution for this pattern. The implementation follows the [Invoker Commands specification](https://open-ui.org/components/invokers.explainer/) currently advancing at Open UI, with Chromium-native support already available.
---
## Platform Popover Upgrades: Nav Drawer, Snackbar & Toast
Three components migrate to the browser's native Popover API this release, each gaining top-layer rendering and the platform accessibility semantics that come with it.
**Nav Drawer** - non-relative positions now use the Popover API in place of the library's custom overlay. The top layer sits above all stacking contexts, CSS transforms, and fixed-position ancestors. Focus trapping and ARIA modal semantics come from the browser rather than library code. Two new lifecycle events accompany the change: `igcClosing` fires just before close and is cancelable - useful for unsaved-changes guards - and `igcClosed` fires after the drawer has fully closed. A new `keepOpenOnEscape` property prevents Escape from dismissing the drawer when the host page needs that key for other interactions.
```js
drawer.addEventListener('igcClosing', (event) => {
if (hasUnsavedChanges) event.preventDefault();
});
```
**Snackbar and Toast** - both now render as popovers and gain a `positioning` property. `viewport` (default) anchors the notification to the viewport. `container` anchors it to the nearest visible ancestor, enabling panel-scoped notifications without fighting stacking contexts or `overflow: hidden` ancestors.
```html
<igc-toast positioning="viewport" open>Saved to cloud</igc-toast>
<div class="editor-panel">
<igc-snackbar positioning="container" open>Draft auto-saved</igc-snackbar>
</div>
```
[Nav Drawer docs →](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/nav-drawer) | [Snackbar docs →](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar) | [Toast docs →](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)
---
## More in This Release
- **Form controls: Enter key submits the associated form** - `IgcInput`, `IgcMaskInput`, `IgcDateTimeInput`, `IgcCheckbox`, `IgcRadio`, `IgcSwitch`, `IgcDatePicker`, and `IgcDateRangePicker` now match native HTML form element behavior on Enter. No code changes required; review any custom Enter-key handlers that manually call `form.submit()` to avoid duplicate submissions.
- **Date Range Picker inline editing** - users can now type the date range value directly into a single input field in addition to the calendar picker. Practical for keyboard-centric or high-density data entry UIs. [Docs →](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/date-range-picker)
- **Input: date/time type theming** - `date`, `time`, `datetime-local`, `week`, and `month` input types now receive full theming support and consistent floating label behavior across all supported themes.
- **Localization: resource strings deprecated** - the per-property `resourceStrings` interfaces for Calendar, Chat, Date Picker, and Date Range Picker are deprecated. Components now use `igniteui-i18n` resource keys. Provide a complete resource strings object rather than setting individual string properties.
---
## Breaking Changes & Migration
**Nav Drawer `overlay` CSS part removed**
Affected: `igc-nav-drawer` (non-relative positions)
What changed: the `overlay` CSS part used to style the drawer's backdrop has been removed as part of the Popover API migration. The underlying element it targeted no longer exists.
Migration: target the `base` CSS part's `::backdrop` pseudo-element, use the `--ig-overlay-background-color` CSS custom property, or apply backdrop customization through the theming package.
[Full changelog →](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md)
---
## How to Get Started
Install or upgrade Ignite UI for Web Components today:
```bash
npm install igniteui-webcomponents@7.2.0
```
- 📘 [Release Notes & Full Changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md)
- 🚀 [Getting Started Guide](https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
- 💬 [GitHub Discussions](https://github.com/IgniteUI/igniteui-webcomponents/discussions)
---
<!--
STRUCTURED_RELEASE_METADATA
product: Ignite UI for Web Components
version: 7.2.0
release_date: 2026-05-27
framework: Web Components (Custom Elements / Lit)
package_manager: npm
package_name: igniteui-webcomponents
install_command: npm install igniteui-webcomponents@7.2.0
changelog_url: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md
docs_url: https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/general-changelog-dv-wc
new_components: []
new_features: [LLMAgentSkillsUpdated, CLIMCPWebComponentsSupport, InvokerCommandsAPI, NavDrawerPopoverAPI, SnackbarTopLayerPositioning, ToastTopLayerPositioning, FormControlsEnterKeySubmit, DateRangePickerInlineEdit, InputDateTimeTheming]
breaking_changes: true
breaking_change_summary: Nav Drawer overlay CSS part removed; target base::backdrop pseudo-element or --ig-overlay-background-color CSS variable
deprecated: [LocalizationResourceStrings-Calendar, LocalizationResourceStrings-Chat, LocalizationResourceStrings-DatePicker, LocalizationResourceStrings-DateRangePicker]
ai_skills_count: 5
ai_skills: [igniteui-wc-choose-components, igniteui-wc-integrate-with-framework, igniteui-wc-customize-component-theme, igniteui-wc-generate-from-image-design, igniteui-wc-optimize-bundle-size]
ai_skills_package_path: node_modules/igniteui-webcomponents/skills/
ai_skills_compatible_agents: [GitHub Copilot, Cursor, Windsurf, Claude, JetBrains Junie, Gemini CLI]
ai_skills_docs_url: https://ko.infragistics.com/products/ignite-ui-web-components/web-components/components/ai/skills
mcp_package: igniteui-cli
mcp_npm_package: "@igniteui/mcp-server"
mcp_start_command: ig mcp
mcp_tools: [list_components, get_doc, search_docs, get_api_reference, search_api, generate_ignite_app]
mcp_supported_frameworks: [Angular, React, Blazor, WebComponents]
invoker_commands_targets: [igc-banner, igc-dialog, igc-nav-drawer, igc-snackbar, igc-toast]
invoker_commands_values: [--show, --hide, --toggle]
snackbar_toast_positioning_values: [viewport, container]
form_controls_enter_submit: [IgcInput, IgcMaskInput, IgcDateTimeInput, IgcCheckbox, IgcRadio, IgcSwitch, IgcDatePicker, IgcDateRangePicker]
compatible_hosts: Angular, React (via igniteui-react), Vue, vanilla JS
tags: [web-components, custom-elements, llm-agent-skills, mcp, model-context-protocol, invoker-commands, popover-api, nav-drawer, snackbar, toast, form-controls, date-range-picker, ai-assisted-development, github-copilot, cursor, windsurf, theming, accessibility, top-layer]
END_METADATA
--> 
Radoslav Mirchev
9 min read
