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
Icon display	Icon	<igc-icon>	Docs
Horizontal or vertical divider line	Divider	<igc-divider>	Docs
Collapsible section	Expansion Panel	<igc-expansion-panel>	Docs
Multiple collapsible sections (accordion)	Accordion	<igc-accordion>	Docs
Tabbed content panels	Tabs	<igc-tabs>	Docs
Image / content slideshow	Carousel	<igc-carousel>	Docs
Multi-step wizard / onboarding flow	Stepper	<igc-stepper>	Docs
Resizable, draggable dashboard tiles	Tile Manager	<igc-tile-manager>	Docs
IDE-style docking / floating panels	Dock Manager	<igc-dockmanager>	Docs

Navigation

UI Need	Component	Tag	Docs
Top application bar / toolbar	Navbar	<igc-navbar>	Docs
Side navigation drawer	Navigation Drawer	<igc-nav-drawer>	Docs
Context menu / actions dropdown	Drop Down	<igc-dropdown>	Docs

Lists & Data Display

UI Need	Component	Tag	Docs
Simple scrollable list	List	<igc-list>	Docs
Hierarchical / tree data	Tree	<igc-tree>	Docs
Tabular data (MIT, lightweight)	Grid Lite	<igc-grid>	Docs
Full-featured tabular data grid	Data Grid	<igc-grid>	Docs
Nested / master-detail grid	Hierarchical Grid	<igc-hierarchical-grid>	Docs
Parent-child relational tree grid	Tree Grid	<igc-tree-grid>	Docs
Cross-tabulation / BI pivot table	Pivot Grid	<igc-pivot-grid>	Docs

Charting & Visualization

Charts are provided by the igniteui-webcomponents-charts package (commercial). Use IgcCategoryChartComponent or IgcFinancialChartComponent for simpler domain-specific scenarios; use IgcDataChartComponent for full flexibility (mixed series, numeric/time axes, scatter, polar, etc.).

UI Need	Component	Tag	Docs
Column chart (vertical bars, category comparison)	Category Chart	<igc-category-chart>	Docs
Line chart (continuous data over time)	Category Chart	<igc-category-chart>	Docs
Area chart (filled line, change over time)	Category Chart	<igc-category-chart>	Docs
Spline chart (smooth curved lines)	Category Chart	<igc-category-chart>	Docs
Step chart (stepped line or area)	Category Chart	<igc-category-chart>	Docs
Pie chart (part-to-whole, small data sets)	Pie Chart	<igc-pie-chart>	Docs
Doughnut chart (part-to-whole with center label)	Doughnut Chart	<igc-doughnut-chart>	Docs
Financial / stock chart (OHLC, candlestick, price series)	Financial Chart	<igc-financial-chart>	Docs
Bar chart (horizontal bars, category comparison)	Data Chart	<igc-data-chart>	Docs
Scatter chart (X/Y data correlation)	Data Chart	<igc-data-chart>	Docs
Bubble chart (3-value scatter with size dimension)	Data Chart	<igc-data-chart>	Docs
Polar chart (angle/radius coordinate system)	Data Chart	<igc-data-chart>	Docs
Composite / combo chart (mixed series types)	Data Chart	<igc-data-chart>	Docs
Shape chart (polygons / polylines on a Cartesian plane)	Data Chart	<igc-data-chart>	Docs
Sparkline (word-sized inline mini-chart)	Sparkline	<igc-sparkline>	Docs
Treemap (hierarchical data as proportional nested nodes)	Treemap	<igc-treemap>	Docs

Conversational / AI

UI Need	Component	Tag	Docs
Chat / AI assistant message thread	Chat	<igc-chat>	Docs

---

Step-by-Step: Choosing Components for a UI

Follow these steps when an agent or user describes a UI requirement:

Step 1 — Identify UI patterns

Break the described UI into atomic patterns. Examples:

• "A booking form" → date input, text inputs, button, maybe a calendar picker
• "An admin dashboard" → navbar, nav drawer, cards, data grid, charts
• "A notification center" → snackbar or toast, badge, list
• "A settings page" → tabs or accordion, switch, input, select, button

Step 2 — Map patterns to components

Use the Component Catalogue tables above to find matching components. When in doubt:

If the user needs…	Prefer…	Over…
Simple static list	<igc-list>	Data Grid
Basic dropdown	<igc-select>	<igc-combo>
Searchable or multi-select dropdown	<igc-combo>	<igc-select>
Tabular data with basic display and functionality	Grid Lite	Data Grid (commercial)
Tabular data, advanced features needed	Data Grid	Grid Lite
Single dismissible message	Toast	Snackbar
Message requiring user action	Snackbar	Toast
Collapsible single section	Expansion Panel	Accordion
Multiple collapsible sections	Accordion	Expansion Panel
Stepped wizard UI	Stepper	Tabs
Content tabs / view switching	Tabs	Stepper

Step 3 — Check the package

Confirm which package provides the component:

• MIT components (inputs, layout, notifications, scheduling, chat) → igniteui-webcomponents
• Advanced grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) → igniteui-webcomponents-grids (commercial)
• Lightweight grid (Grid Lite) → igniteui-grid-lite (MIT)
• Docking layout → igniteui-dockmanager (commercial)
• Charts & visualizations (Category Chart, Data Chart, Financial Chart, Pie Chart, Sparkline, Treemap, etc.) → igniteui-webcomponents-charts (commercial)

Step 4 — Link to official resources

Always direct the user to the official documentation linked in the tables above. Key entry points:

• Component overview: Ignite UI Web Components Docs
• Live Storybook demos: https://igniteui.github.io/igniteui-webcomponents
• npm package: https://www.npmjs.com/package/igniteui-webcomponents
• GitHub repository: https://github.com/IgniteUI/igniteui-webcomponents
• Changelog / releases: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md

Step 5 — Provide a starter code snippet

Once components are identified, give the user a minimal working snippet. Example for an admin dashboard shell:

import {
  defineComponents,
  IgcNavbarComponent,
  IgcNavDrawerComponent,
  IgcCardComponent,
  IgcIconComponent,
  IgcButtonComponent,
  registerIconFromText,
} from 'igniteui-webcomponents';

defineComponents(
  IgcNavbarComponent,
  IgcNavDrawerComponent,
  IgcCardComponent,
  IgcIconComponent,
  IgcButtonComponent
);

registerIconFromText('menu', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>', 'material');
registerIconFromText('home', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>', 'material');
registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>', 'material');

<igc-navbar>
  <igc-icon name="menu" collection="material" slot="start"></igc-icon>
  <h1>My Dashboard</h1>
</igc-navbar>

<igc-nav-drawer>
  <igc-nav-drawer-item>
    <igc-icon name="home" collection="material" slot="icon"></igc-icon>
    <span slot="content">Home</span>
  </igc-nav-drawer-item>
  <igc-nav-drawer-item>
    <igc-icon name="build" collection="material" slot="icon"></igc-icon>
    <span slot="content">Settings</span>
  </igc-nav-drawer-item>
</igc-nav-drawer>

<igc-card>
  <igc-card-header>
    <h3 slot="title">Summary</h3>
  </igc-card-header>
  <igc-card-content>Dashboard content here</igc-card-content>
</igc-card>

---

Common UI Scenarios → Recommended Component Sets

Login / Authentication Form

• <igc-input> — email and password fields
• <igc-checkbox> — "Remember me"
• <igc-button> — submit
• <igc-snackbar> — error/success feedback
• Docs: Input · Button · Snackbar

User Profile / Settings Page

• <igc-avatar> — profile picture
• <igc-tabs> — section navigation (Profile, Security, Notifications)
• <igc-input> / <igc-textarea> — editable fields
• <igc-switch> — feature toggles
• <igc-select> — preference dropdowns
• <igc-button> — save/cancel actions
• Docs: Avatar · Tabs · Switch

Data Table / Admin List View

• <igc-input> — search bar
• <igc-combo> — filter dropdowns
• <igc-grid> (Grid Lite) or Data Grid — tabular data
• <igc-button> / <igc-icon-button> — actions
• <igc-dialog> — confirm delete modal
• <igc-badge> — status indicators
• Docs: Grid Lite · Data Grid · Dialog

Booking / Reservation Form

• <igc-date-range-picker> — check-in / check-out
• <igc-input> — guest details
• <igc-select> — room type
• <igc-stepper> — multi-step booking flow
• <igc-button> — next / confirm
• <igc-toast> — booking confirmation
• Docs: Date Range Picker · Stepper

Analytics / Reporting Dashboard

• <igc-navbar> — top bar
• <igc-nav-drawer> — side navigation
• <igc-card> — KPI summary cards
• <igc-tabs> or <igc-tile-manager> — section layout
• Data Grid or Pivot Grid — detailed data tables
• <igc-linear-progress> / <igc-circular-progress> — loading states
• Docs: Tile Manager · Pivot Grid

Notification / Activity Feed

• <igc-list> — activity items
• <igc-avatar> — user avatars in each item
• <igc-badge> — unread count
• <igc-snackbar> — real-time alerts
• <igc-chip> — filter tags (All, Mentions, Replies)
• Docs: List · Badge · Chip

AI / Chatbot Interface

• <igc-chat> — full chat UI with message threading
• <igc-input> or <igc-textarea> — message input
• <igc-icon-button> — send button
• <igc-avatar> — bot and user avatars
• <igc-circular-progress> — "thinking" indicator
• Docs: Chat · Avatar

---

Common Issues & Solutions

"I can't find a component for X"

1. Check the full component list in the official docs
2. Consider composing two simpler components (e.g., <igc-card> + <igc-list> for a list card)

"Which grid should I use?"

Scenario	Component	Package	License
Simple table with basic features	Grid Lite	igniteui-grid-lite	MIT
Advanced/excel-style filtering, paging, editing	Data Grid	igniteui-webcomponents-grids	Commercial
Master-detail / nested rows	Hierarchical Grid	igniteui-webcomponents-grids	Commercial
Parent-child with shared columns	Tree Grid	igniteui-webcomponents-grids	Commercial
Cross-tabulation / OLAP analysis	Pivot Grid	igniteui-webcomponents-grids	Commercial

"I need React support"

Use the igniteui-react package. Components are wrapped with React-friendly event bindings and props. See the igniteui-wc-integrate-with-framework skill for setup.

"How do I get commercial components?"

Visit https://www.infragistics.com/products/ignite-ui-web-components or contact Infragistics sales for licensing information.

---

Additional Resources

Resource	Link
Getting started guide	https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started
GitHub repository	https://github.com/IgniteUI/igniteui-webcomponents
Changelog	https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md
Discord community	https://discord.gg/39MjrTRqds
Infragistics contact	https://www.infragistics.com/about-us/contact-us