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.

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. 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.

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 — Set up chosen components in React, Angular, Vue, or vanilla JS
• igniteui-wc-customize-component-theme — Style and theme the components you select
• igniteui-wc-optimize-bundle-size — 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	MIT	npm install igniteui-webcomponents	General UI components (inputs, layouts, notifications, scheduling)
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	MIT	npm install igniteui-grid-lite	Lightweight data grid for simpler tabular data
igniteui-dockmanager	Commercial	npm install igniteui-dockmanager (trial)	Windowing / docking layouts (IDE-style panels)
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	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	MIT	npm install igniteui-grid-lite	Lightweight data grid for simpler tabular data
igniteui-dockmanager	Commercial	npm install igniteui-dockmanager (trial)	Windowing / docking layouts (IDE-style panels)
@infragistics/igniteui-dockmanager	Commercial	npm install @infragistics/igniteui-dockmanager (licensed)	Windowing / docking layouts (IDE-style panels)
igniteui-webcomponents-charts	Commercial	npm install igniteui-webcomponents-core igniteui-webcomponents-charts (trial)	Charts and data visualizations (65+ chart types)
@infragistics/igniteui-webcomponents-charts	Commercial	npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts (licensed)	Charts and data visualizations (65+ chart types)

---

Package Routing

Component family	Package
General UI components	igniteui-webcomponents
Advanced grids	igniteui-webcomponents-grids (trial) @infragistics/igniteui-webcomponents-grids (licensed)
Grid Lite	igniteui-grid-lite
Dock Manager	igniteui-dockmanager (trial) @infragistics/igniteui-dockmanager (licensed)
Charts	igniteui-webcomponents-charts (trial) @infragistics/igniteui-webcomponents-charts (licensed)

If the request only says "grid", choose by features:

• Advanced features such as editing, paging, summaries, grouping, hierarchical data, or pivot behavior -> igniteui-webcomponents-grids
• Lightweight table -> igniteui-grid-lite

Component Catalogue by UI Pattern

Use the table below to map a UI need to the right component, then follow the documentation link.

Inputs & Forms

All inputs are form-associated and integrate natively with <form>.

UI Need	Component	Tag	Docs
Text field / text input	Input	<igc-input>	Docs
Multi-line text	Textarea	<igc-textarea>	Docs
Checkbox	Checkbox	<igc-checkbox>	Docs
On/off toggle	Switch	<igc-switch>	Docs
Single choice from a list	Radio / Radio Group	<igc-radio> / <igc-radio-group>	Docs
Star / score rating	Rating	<igc-rating>	Docs
Formatted / masked text input	Mask Input	<igc-mask-input>	Docs
Date and time input	Date Time Input	<igc-date-time-input>	Docs
File upload	File Input	<igc-file-input>	Docs
Simple dropdown / select	Select	<igc-select>	Docs
Searchable dropdown, single or multi-select	Combo	<igc-combo>	Docs
Grouped toggle buttons	Button Group	<igc-button-group>	Docs
Range / numeric slider	Slider	<igc-slider>	Docs
Range slider (two handles)	Range Slider	<igc-range-slider>	Docs

Buttons & Actions

UI Need	Component	Tag	Docs
Standard clickable button	Button	<igc-button>	Docs
Icon-only button	Icon Button	<igc-icon-button>	Docs
Click ripple effect	Ripple	<igc-ripple>	Docs
Removable tag / filter chip	Chip	<igc-chip>	Docs

Scheduling & Date Pickers

UI Need	Component	Tag	Docs
Full calendar view	Calendar	<igc-calendar>	Docs
Date picker (popup calendar)	Date Picker	<igc-datepicker>	Docs
Date range selection	Date Range Picker	<igc-date-range-picker>	Docs

Notifications & Feedback

UI Need	Component	Tag	Docs
Brief auto-dismiss notification	Toast	<igc-toast>	Docs
Actionable dismissible notification bar	Snackbar	<igc-snackbar>	Docs
Persistent status banner (e.g. warning, error)	Banner	<igc-banner>	Docs
Modal confirmation or content dialog	Dialog	<igc-dialog>	Docs
Tooltip on hover	Tooltip	<igc-tooltip>	Docs
Small count / status indicator	Badge	<igc-badge>	Docs

Progress Indicators

UI Need	Component	Tag	Docs
Horizontal progress bar	Linear Progress	<igc-linear-progress>	Docs
Circular / spinner progress	Circular Progress	<igc-circular-progress>	Docs

Layouts & Containers

UI Need	Component	Tag	Docs
Generic content card	Card	<igc-card>	Docs
User avatar / profile image	Avatar	<igc-avatar>	Docs