igniteui-cli 14.10.0-alpha.2 → 14.10.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/package.json +4 -4
  2. package/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json +2 -2
  3. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md +358 -0
  4. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-customize-component-theme/SKILL.md +615 -0
  5. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/SKILL.md +112 -0
  6. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/angular.md +185 -0
  7. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/react.md +116 -0
  8. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md +118 -0
  9. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vue.md +181 -0
  10. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-optimize-bundle-size/SKILL.md +709 -0
  11. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__vscode/mcp.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-cli",
3
- "version": "14.10.0-alpha.2",
3
+ "version": "14.10.0-alpha.3",
4
4
  "description": "CLI tool for creating Ignite UI projects",
5
5
  "keywords": [
6
6
  "CLI",
@@ -66,9 +66,9 @@
66
66
  "all": true
67
67
  },
68
68
  "dependencies": {
69
- "@igniteui/angular-templates": "^21.1.14100-alpha.2",
70
- "@igniteui/cli-core": "^14.10.0-alpha.2",
71
- "@igniteui/mcp-server": "^14.10.0-alpha.2",
69
+ "@igniteui/angular-templates": "^21.1.14100-alpha.3",
70
+ "@igniteui/cli-core": "^14.10.0-alpha.3",
71
+ "@igniteui/mcp-server": "^14.10.0-alpha.3",
72
72
  "@inquirer/prompts": "^7.9.0",
73
73
  "@types/yargs": "^17.0.33",
74
74
  "chalk": "^5.3.0",
package/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "servers": {
3
- "igniteui-cli": {
3
+ "igniteui": {
4
4
  "command": "npx",
5
- "args": ["-y", "igniteui-cli-mcp"]
5
+ "args": ["-y", "igniteui-cli@next", "mcp"]
6
6
  },
7
7
  "igniteui-theming": {
8
8
  "command": "npx",
package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md ADDED
@@ -0,0 +1,358 @@
1
+ ---
2
+ name: igniteui-wc-choose-components
3
+ description: Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references
4
+ user-invocable: true
5
+ ---
6
+
7
+ # Choose the Right Ignite UI Components
8
+
9
+ 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.
10
+
11
+ ## Example Usage
12
+
13
+ - "What component should I use to display a list of items with actions?"
14
+ - "I need a date picker for a booking form"
15
+ - "How do I show file upload progress?"
16
+ - "What's the best component for a navigation sidebar?"
17
+ - "I need a searchable dropdown with multi-select"
18
+ - "Build a dashboard layout with cards and a data grid"
19
+ - "I want to display hierarchical/tree data"
20
+ - "Show me components for notifications and alerts"
21
+
22
+ ## Related Skills
23
+
24
+ - [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) — Set up chosen components in React, Angular, Vue, or vanilla JS
25
+ - [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) — Style and theme the components you select
26
+ - [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) — Import only the components you actually use
27
+
28
+ ## When to Use
29
+
30
+ - Agent or user needs to decide which component fits a UI requirement
31
+ - User describes a UI pattern and needs a matching component name
32
+ - User wants to explore what components are available
33
+ - User needs links to official docs or live examples for a specific component
34
+ - Starting a new feature and mapping requirements to components
35
+ - Reworking existing UI with new or different component requirements
36
+
37
+ ---
38
+
39
+ ## Available Packages
40
+
41
+ Ignite UI for Web Components is distributed across several packages depending on your needs:
42
+
43
+ | Package | License | Install | Best For |
44
+ |---|---|---|---|
45
+ | [`igniteui-webcomponents`](https://www.npmjs.com/package/igniteui-webcomponents) | MIT | `npm install igniteui-webcomponents` | General UI components (inputs, layouts, notifications, scheduling) |
46
+ | [`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 |
47
+ | [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
48
+ | [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
49
+
50
+ ---
51
+
52
+ ## Component Catalogue by UI Pattern
53
+
54
+ Use the table below to map a UI need to the right component, then follow the documentation link.
55
+
56
+ ### Inputs & Forms
57
+
58
+ All inputs are form-associated and integrate natively with `<form>`.
59
+
60
+ | UI Need | Component | Tag | Docs |
61
+ |---|---|---|---|
62
+ | Text field / text input | Input | `<igc-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) |
63
+ | Multi-line text | Textarea | `<igc-textarea>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/text-area) |
64
+ | Checkbox | Checkbox | `<igc-checkbox>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox) |
65
+ | On/off toggle | Switch | `<igc-switch>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch) |
66
+ | Single choice from a list | Radio / Radio Group | `<igc-radio>` / `<igc-radio-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio) |
67
+ | Star / score rating | Rating | `<igc-rating>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating) |
68
+ | Formatted / masked text input | Mask Input | `<igc-mask-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) |
69
+ | Date and time input | Date Time Input | `<igc-date-time-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input) |
70
+ | File upload | File Input | `<igc-file-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input) |
71
+ | Simple dropdown / select | Select | `<igc-select>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select) |
72
+ | Searchable dropdown, single or multi-select | Combo | `<igc-combo>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/combo/overview) |
73
+ | Grouped toggle buttons | Button Group | `<igc-button-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button-group) |
74
+ | Range / numeric slider | Slider | `<igc-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) |
75
+ | Range slider (two handles) | Range Slider | `<igc-range-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) |
76
+
77
+ ### Buttons & Actions
78
+
79
+ | UI Need | Component | Tag | Docs |
80
+ |---|---|---|---|
81
+ | Standard clickable button | Button | `<igc-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) |
82
+ | Icon-only button | Icon Button | `<igc-icon-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button) |
83
+ | Click ripple effect | Ripple | `<igc-ripple>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple) |
84
+ | Removable tag / filter chip | Chip | `<igc-chip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip) |
85
+
86
+ ### Scheduling & Date Pickers
87
+
88
+ | UI Need | Component | Tag | Docs |
89
+ |---|---|---|---|
90
+ | Full calendar view | Calendar | `<igc-calendar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar) |
91
+ | Date picker (popup calendar) | Date Picker | `<igc-datepicker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker) |
92
+ | Date range selection | Date Range Picker | `<igc-date-range-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) |
93
+
94
+ ### Notifications & Feedback
95
+
96
+ | UI Need | Component | Tag | Docs |
97
+ |---|---|---|---|
98
+ | Brief auto-dismiss notification | Toast | `<igc-toast>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast) |
99
+ | Actionable dismissible notification bar | Snackbar | `<igc-snackbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar) |
100
+ | Persistent status banner (e.g. warning, error) | Banner | `<igc-banner>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/banner) |
101
+ | Modal confirmation or content dialog | Dialog | `<igc-dialog>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog) |
102
+ | Tooltip on hover | Tooltip | `<igc-tooltip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip) |
103
+ | Small count / status indicator | Badge | `<igc-badge>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) |
104
+
105
+ ### Progress Indicators
106
+
107
+ | UI Need | Component | Tag | Docs |
108
+ |---|---|---|---|
109
+ | Horizontal progress bar | Linear Progress | `<igc-linear-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress) |
110
+ | Circular / spinner progress | Circular Progress | `<igc-circular-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress) |
111
+
112
+ ### Layouts & Containers
113
+
114
+ | UI Need | Component | Tag | Docs |
115
+ |---|---|---|---|
116
+ | Generic content card | Card | `<igc-card>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card) |
117
+ | User avatar / profile image | Avatar | `<igc-avatar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) |
118
+ | Icon display | Icon | `<igc-icon>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon) |
119
+ | Horizontal or vertical divider line | Divider | `<igc-divider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/divider) |
120
+ | Collapsible section | Expansion Panel | `<igc-expansion-panel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel) |
121
+ | Multiple collapsible sections (accordion) | Accordion | `<igc-accordion>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion) |
122
+ | Tabbed content panels | Tabs | `<igc-tabs>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) |
123
+ | Image / content slideshow | Carousel | `<igc-carousel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/carousel) |
124
+ | Multi-step wizard / onboarding flow | Stepper | `<igc-stepper>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper) |
125
+ | Resizable, draggable dashboard tiles | Tile Manager | `<igc-tile-manager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) |
126
+ | IDE-style docking / floating panels | Dock Manager | `<igc-dockmanager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager) |
127
+
128
+ ### Navigation
129
+
130
+ | UI Need | Component | Tag | Docs |
131
+ |---|---|---|---|
132
+ | Top application bar / toolbar | Navbar | `<igc-navbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar) |
133
+ | Side navigation drawer | Navigation Drawer | `<igc-nav-drawer>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer) |
134
+ | Context menu / actions dropdown | Drop Down | `<igc-dropdown>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dropdown) |
135
+
136
+ ### Lists & Data Display
137
+
138
+ | UI Need | Component | Tag | Docs |
139
+ |---|---|---|---|
140
+ | Simple scrollable list | List | `<igc-list>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) |
141
+ | Hierarchical / tree data | Tree | `<igc-tree>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree) |
142
+ | Tabular data (MIT, lightweight) | Grid Lite | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) |
143
+ | Full-featured tabular data grid | Data Grid | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) |
144
+ | Nested / master-detail grid | Hierarchical Grid | `<igc-hierarchical-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview) |
145
+ | Parent-child relational tree grid | Tree Grid | `<igc-tree-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview) |
146
+ | Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/web-components/components/grids/pivot-grid/overview) |
147
+
148
+ ### Conversational / AI
149
+
150
+ | UI Need | Component | Tag | Docs |
151
+ |---|---|---|---|
152
+ | Chat / AI assistant message thread | Chat | `<igc-chat>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) |
153
+
154
+ ---
155
+
156
+ ## Step-by-Step: Choosing Components for a UI
157
+
158
+ Follow these steps when an agent or user describes a UI requirement:
159
+
160
+ ### Step 1 — Identify UI patterns
161
+
162
+ Break the described UI into atomic patterns. Examples:
163
+ - "A booking form" → date input, text inputs, button, maybe a calendar picker
164
+ - "An admin dashboard" → navbar, nav drawer, cards, data grid, charts
165
+ - "A notification center" → snackbar or toast, badge, list
166
+ - "A settings page" → tabs or accordion, switch, input, select, button
167
+
168
+ ### Step 2 — Map patterns to components
169
+
170
+ Use the **Component Catalogue** tables above to find matching components. When in doubt:
171
+
172
+ | If the user needs… | Prefer… | Over… |
173
+ |---|---|---|
174
+ | Simple static list | `<igc-list>` | Data Grid |
175
+ | Basic dropdown | `<igc-select>` | `<igc-combo>` |
176
+ | Searchable or multi-select dropdown | `<igc-combo>` | `<igc-select>` |
177
+ | Tabular data with basic display and functionality | Grid Lite | Data Grid (commercial) |
178
+ | Tabular data, advanced features needed | Data Grid | Grid Lite |
179
+ | Single dismissible message | Toast | Snackbar |
180
+ | Message requiring user action | Snackbar | Toast |
181
+ | Collapsible single section | Expansion Panel | Accordion |
182
+ | Multiple collapsible sections | Accordion | Expansion Panel |
183
+ | Stepped wizard UI | Stepper | Tabs |
184
+ | Content tabs / view switching | Tabs | Stepper |
185
+
186
+ ### Step 3 — Check the package
187
+
188
+ Confirm which package provides the component:
189
+
190
+ - **MIT components** (inputs, layout, notifications, scheduling, chat) → `igniteui-webcomponents`
191
+ - **Advanced grids** (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) → `igniteui-webcomponents-grids` *(commercial)*
192
+ - **Lightweight grid** (Grid Lite) → `igniteui-grid-lite` *(MIT)*
193
+ - **Docking layout** → `igniteui-dockmanager` *(commercial)*
194
+
195
+ ### Step 4 — Link to official resources
196
+
197
+ Always direct the user to the official documentation linked in the tables above. Key entry points:
198
+
199
+ - **Component overview**: [Ignite UI Web Components Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
200
+ - **Live Storybook demos**: [https://igniteui.github.io/igniteui-webcomponents](https://igniteui.github.io/igniteui-webcomponents)
201
+ - **npm package**: [https://www.npmjs.com/package/igniteui-webcomponents](https://www.npmjs.com/package/igniteui-webcomponents)
202
+ - **GitHub repository**: [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents)
203
+ - **Changelog / releases**: [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md)
204
+
205
+ ### Step 5 — Provide a starter code snippet
206
+
207
+ Once components are identified, give the user a minimal working snippet. Example for an admin dashboard shell:
208
+
209
+ ```typescript
210
+ import {
211
+ defineComponents,
212
+ IgcNavbarComponent,
213
+ IgcNavDrawerComponent,
214
+ IgcCardComponent,
215
+ IgcIconComponent,
216
+ IgcButtonComponent,
217
+ registerIconFromText,
218
+ } from 'igniteui-webcomponents';
219
+
220
+ defineComponents(
221
+ IgcNavbarComponent,
222
+ IgcNavDrawerComponent,
223
+ IgcCardComponent,
224
+ IgcIconComponent,
225
+ IgcButtonComponent
226
+ );
227
+
228
+ 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');
229
+ 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');
230
+ 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');
231
+ ```
232
+
233
+ ```html
234
+ <igc-navbar>
235
+ <igc-icon name="menu" collection="material" slot="start"></igc-icon>
236
+ <h1>My Dashboard</h1>
237
+ </igc-navbar>
238
+
239
+ <igc-nav-drawer>
240
+ <igc-nav-drawer-item>
241
+ <igc-icon name="home" collection="material" slot="icon"></igc-icon>
242
+ <span slot="content">Home</span>
243
+ </igc-nav-drawer-item>
244
+ <igc-nav-drawer-item>
245
+ <igc-icon name="build" collection="material" slot="icon"></igc-icon>
246
+ <span slot="content">Settings</span>
247
+ </igc-nav-drawer-item>
248
+ </igc-nav-drawer>
249
+
250
+ <igc-card>
251
+ <igc-card-header>
252
+ <h3 slot="title">Summary</h3>
253
+ </igc-card-header>
254
+ <igc-card-content>Dashboard content here</igc-card-content>
255
+ </igc-card>
256
+ ```
257
+
258
+ ---
259
+
260
+ ## Common UI Scenarios → Recommended Component Sets
261
+
262
+ ### Login / Authentication Form
263
+ - `<igc-input>` — email and password fields
264
+ - `<igc-checkbox>` — "Remember me"
265
+ - `<igc-button>` — submit
266
+ - `<igc-snackbar>` — error/success feedback
267
+ - **Docs**: [Input](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) · [Button](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) · [Snackbar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar)
268
+
269
+ ### User Profile / Settings Page
270
+ - `<igc-avatar>` — profile picture
271
+ - `<igc-tabs>` — section navigation (Profile, Security, Notifications)
272
+ - `<igc-input>` / `<igc-textarea>` — editable fields
273
+ - `<igc-switch>` — feature toggles
274
+ - `<igc-select>` — preference dropdowns
275
+ - `<igc-button>` — save/cancel actions
276
+ - **Docs**: [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) · [Tabs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) · [Switch](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch)
277
+
278
+ ### Data Table / Admin List View
279
+ - `<igc-input>` — search bar
280
+ - `<igc-combo>` — filter dropdowns
281
+ - `<igc-grid>` (Grid Lite) or Data Grid — tabular data
282
+ - `<igc-button>` / `<igc-icon-button>` — actions
283
+ - `<igc-dialog>` — confirm delete modal
284
+ - `<igc-badge>` — status indicators
285
+ - **Docs**: [Grid Lite](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) · [Data Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) · [Dialog](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog)
286
+
287
+ ### Booking / Reservation Form
288
+ - `<igc-date-range-picker>` — check-in / check-out
289
+ - `<igc-input>` — guest details
290
+ - `<igc-select>` — room type
291
+ - `<igc-stepper>` — multi-step booking flow
292
+ - `<igc-button>` — next / confirm
293
+ - `<igc-toast>` — booking confirmation
294
+ - **Docs**: [Date Range Picker](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) · [Stepper](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper)
295
+
296
+ ### Analytics / Reporting Dashboard
297
+ - `<igc-navbar>` — top bar
298
+ - `<igc-nav-drawer>` — side navigation
299
+ - `<igc-card>` — KPI summary cards
300
+ - `<igc-tabs>` or `<igc-tile-manager>` — section layout
301
+ - Data Grid or Pivot Grid — detailed data tables
302
+ - `<igc-linear-progress>` / `<igc-circular-progress>` — loading states
303
+ - **Docs**: [Tile Manager](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) · [Pivot Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview)
304
+
305
+ ### Notification / Activity Feed
306
+ - `<igc-list>` — activity items
307
+ - `<igc-avatar>` — user avatars in each item
308
+ - `<igc-badge>` — unread count
309
+ - `<igc-snackbar>` — real-time alerts
310
+ - `<igc-chip>` — filter tags (All, Mentions, Replies)
311
+ - **Docs**: [List](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) · [Badge](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) · [Chip](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip)
312
+
313
+ ### AI / Chatbot Interface
314
+ - `<igc-chat>` — full chat UI with message threading
315
+ - `<igc-input>` or `<igc-textarea>` — message input
316
+ - `<igc-icon-button>` — send button
317
+ - `<igc-avatar>` — bot and user avatars
318
+ - `<igc-circular-progress>` — "thinking" indicator
319
+ - **Docs**: [Chat](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) · [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar)
320
+
321
+ ---
322
+
323
+ ## Common Issues & Solutions
324
+
325
+ ### "I can't find a component for X"
326
+
327
+ 1. Check the [full component list](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) in the official docs
328
+ 2. Consider composing two simpler components (e.g., `<igc-card>` + `<igc-list>` for a list card)
329
+
330
+ ### "Which grid should I use?"
331
+
332
+ | Scenario | Component | Package | License |
333
+ |---|---|---|---|
334
+ | Simple table with basic features | Grid Lite | `igniteui-grid-lite` | MIT |
335
+ | Advanced/excel-style filtering, paging, editing | Data Grid | `igniteui-webcomponents-grids` | Commercial |
336
+ | Master-detail / nested rows | Hierarchical Grid | `igniteui-webcomponents-grids` | Commercial |
337
+ | Parent-child with shared columns | Tree Grid | `igniteui-webcomponents-grids` | Commercial |
338
+ | Cross-tabulation / OLAP analysis | Pivot Grid | `igniteui-webcomponents-grids` | Commercial |
339
+
340
+ ### "I need React support"
341
+
342
+ Use the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package. Components are wrapped with React-friendly event bindings and props. See the [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) skill for setup.
343
+
344
+ ### "How do I get commercial components?"
345
+
346
+ Visit [https://www.infragistics.com/products/ignite-ui-web-components](https://www.infragistics.com/products/ignite-ui-web-components) or contact [Infragistics sales](https://www.infragistics.com/about-us/contact-us) for licensing information.
347
+
348
+ ---
349
+
350
+ ## Additional Resources
351
+
352
+ | Resource | Link |
353
+ |---|---|
354
+ | Getting started guide | [https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) |
355
+ | GitHub repository | [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents) |
356
+ | Changelog | [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md) |
357
+ | Discord community | [https://discord.gg/39MjrTRqds](https://discord.gg/39MjrTRqds) |
358
+ | Infragistics contact | [https://www.infragistics.com/about-us/contact-us](https://www.infragistics.com/about-us/contact-us) |