/igniteui-wc-choose-components

name: igniteui-wc-choose-components
description: Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references
user-invocable: true

Choose the Right Ignite UI Components

This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.

Prerequisites

• The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider

> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** > > Before using the Ignite UI CLI MCP tools, you MUST verify the MCP server is available > by calling `list_components`. If the tool is not available or the call fails, > you MUST automatically configure it by following the setup instructions in > [`reference/mcp-setup.md`](./reference/mcp-setup.md). > > After writing the file, inform the user that the MCP server has been > configured and they may need to reload the editor for the tools to activate. > Start the MCP server and wait for that MCP server to start before continuing the component-related work. > Do NOT skip this step or ask the user to do it manually.

Setting Up the Ignite UI CLI MCP Server

> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`reference/mcp-setup.md`](./reference/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.

Before You Answer

• Choose the package before writing imports or install steps.
• If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
• If the user also needs setup or code, then load [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md).

Example Usage

• "What component should I use to display a list of items with actions?"
• "I need a date picker for a booking form"
• "How do I show file upload progress?"
• "What's the best component for a navigation sidebar?"
• "I need a searchable dropdown with multi-select"
• "Build a dashboard layout with cards and a data grid"
• "I want to display hierarchical/tree data"
• "Show me components for notifications and alerts"

Related Skills

• [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) — Set up chosen components in React, Angular, Vue, or vanilla JS
• [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) — Style and theme the components you select
• [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) — Import only the components you actually use

When to Use

• Agent or user needs to decide which component fits a UI requirement
• User describes a UI pattern and needs a matching component name
• User wants to explore what components are available
• User needs links to official docs or live examples for a specific component
• Starting a new feature and mapping requirements to components
• Reworking existing UI with new or different component requirements

---

Available Packages

Ignite UI for Web Components is distributed across several packages depending on your needs:

| Package | License | Install | Best For | |---|---|---|---| | [`igniteui-webcomponents`](https://www.npmjs.com/package/igniteui-webcomponents) | MIT | `npm install igniteui-webcomponents` | General UI components (inputs, layouts, notifications, scheduling) | | [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities | | [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data | | [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) | | [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities | | [`@infragistics/igniteui-webcomponents-grids`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-grids) | Commercial | `npm install @infragistics/igniteui-webcomponents-grids` (licensed) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities | | [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data | | [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) | | [`@infragistics/igniteui-dockmanager`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-dockmanager) | Commercial | `npm install @infragistics/igniteui-dockmanager` (licensed) | Windowing / docking layouts (IDE-style panels) | | [`igniteui-webcomponents-charts`](https://www.npmjs.com/package/igniteui-webcomponents-charts) | Commercial | `npm install igniteui-webcomponents-core igniteui-webcomponents-charts` (trial) | Charts and data visualizations (65+ chart types) | | [`@infragistics/igniteui-webcomponents-charts`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-charts) | Commercial | `npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts` (licensed) | Charts and data visualizations (65+ chart t