القائمة
Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Covers non-grid Ignite UI for Blazor UI components: application setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider, rating), layout containers (tabs, stepper, accordion, expansion panel, navigation drawer, navbar, tree), data-display components (list, card, carousel, avatar, badge, chip, icon, progress indicators, dropdown, tooltip), feedback overlays (dialog, snackbar, toast, banner), layout managers (Dock Manager, Tile Manager); and visualizations (Category Chart, Data Chart, Financial/Stock Chart, Pie/Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile) requiring IgniteUI.Blazor or IgniteUI.Blazor.Trial. Use when users ask about any Ignite UI Blazor component that is NOT a data grid. Do NOT use for data grids, tables, or tabular data - use igniteui-blazor-grids instead. Do NOT use for theming or styling - use igniteui-blazor-theming instead.
Implement Blazor application views from design images using Ignite UI Blazor components. Uses MCP servers (igniteui-cli, igniteui-theming) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Blazor view with Ignite UI Blazor components. Also triggers when the user asks to "implement this design", "build this UI", "convert this mockup", or "create a page from this image" in an Ignite UI Blazor project.
Provides guidance on all Ignite UI for Blazor data grid types (Grid Lite, Flat Grid, Tree Grid, Hierarchical Grid, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, read-only data display, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) - use igniteui-blazor-components instead. Do NOT use for theming or styling - use igniteui-blazor-theming instead.
Covers theming and visual customization for Ignite UI for Blazor: choosing and switching built-in themes (Bootstrap, Material, Fluent, Indigo - light and dark variants), customizing component appearance with CSS custom properties (design tokens), using the igniteui-theming MCP server to generate component themes and palettes, applying custom palettes, setting roundness/spacing/sizing tokens globally, dark mode switching, scoped component theming, and CSS parts. Use when users ask about changing the look and feel of Ignite UI Blazor components, applying a color scheme, generating CSS variables, using CSS parts, or customizing design tokens. Do NOT use for grid data features or component configuration - use igniteui-blazor-grids or igniteui-blazor-components instead.
This skill identifies the right Ignite UI for React components for any UI pattern and covers installing, importing, and using them — including JSX patterns, event handling, refs, forms, and TypeScript. Use this when choosing components, setting up a React project, writing component JSX, handling events, or integrating with React state and form libraries.
This skill customizes Ignite UI for React component styling using CSS custom properties and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application
| 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 |
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.
igniteui-cli) available as a tool providerAGENT 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 inreference/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.
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.
package.json, add or install the correct Ignite UI dependency first. Absence from package.json does not mean the package is invalid.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) |
| 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:
igniteui-webcomponents-gridsigniteui-grid-liteUse the table below to map a UI need to the right component, then follow the documentation link.
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 |
| 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 |
| 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 |
| 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 |
| UI Need | Component | Tag | Docs |
|---|---|---|---|
| Horizontal progress bar | Linear Progress | <igc-linear-progress> | Docs |
| Circular / spinner progress | Circular Progress | <igc-circular-progress> | Docs |
| 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 |
| 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 |
| 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 |
Charts are provided by the
igniteui-webcomponents-chartspackage (commercial). UseIgcCategoryChartComponentorIgcFinancialChartComponentfor simpler domain-specific scenarios; useIgcDataChartComponentfor 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 |
| UI Need | Component | Tag | Docs |
|---|---|---|---|
| Chat / AI assistant message thread | Chat | <igc-chat> | Docs |
Follow these steps when an agent or user describes a UI requirement:
Break the described UI into atomic patterns. Examples:
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 |
Confirm which package provides the component:
igniteui-webcomponentsigniteui-webcomponents-grids (commercial)igniteui-grid-lite (MIT)igniteui-dockmanager (commercial)igniteui-webcomponents-charts (commercial)Always direct the user to the official documentation linked in the tables above. Key entry points:
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>
<igc-input> — email and password fields<igc-checkbox> — "Remember me"<igc-button> — submit<igc-snackbar> — error/success feedback<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<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<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<igc-navbar> — top bar<igc-nav-drawer> — side navigation<igc-card> — KPI summary cards<igc-tabs> or <igc-tile-manager> — section layout<igc-linear-progress> / <igc-circular-progress> — loading states<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)<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<igc-card> + <igc-list> for a list card)| 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 |
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.
Visit https://www.infragistics.com/products/ignite-ui-web-components or contact Infragistics sales for licensing information.
| 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 |