Ignite UI for Web Components

When using an AI agent with MCP (Model Context Protocol) capabilities to work with Ignite UI Web Components, use these specific lookup patterns to find documentation, APIs, and class names:

• Find component documentation names: Use list_components({ framework: "webcomponents", filter: "<keyword>" })
• Get usage examples and slots: Use get_doc({ framework: "webcomponents", name: "<doc-name>" })
• Find exact class names: Use search_api({ platform: "webcomponents", query: "<keyword>" })
• Get full property/method/event API: Use get_api_reference({ platform: "webcomponents", component: "<ClassName>" })

Components are distributed across several packages depending on their license and functionality:

• igniteui-webcomponents: MIT components including inputs, layout, notifications, scheduling, and chat.
• igniteui-webcomponents-grids: Commercial package for advanced grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid).
• igniteui-grid-lite: MIT package for the lightweight Grid Lite component.
• igniteui-dockmanager: Commercial package for docking layouts.
• igniteui-webcomponents-charts: Commercial package for charts & visualizations (Category Chart, Data Chart, Financial Chart, Pie Chart, Sparkline, Treemap, etc.).

Compound components (like combo, grid, date-picker, or select) contain internal child components that each require their own theming.

To theme a compound component:

1. Use get_component_design_tokens on the parent component (e.g., date-picker).
2. Identify the related child themes and scope selectors provided in the response.
3. Use create_component_theme for each child component, wrapping them in the parent's selector to ensure correct scoping.

The Dock Manager provides a complete windowing experience, allowing developers to split complex application layouts into smaller, manageable panes.

• Package: igniteui-dockmanager
• License: Commercial
• Usage: Use this feature to create sophisticated, pane-based user interfaces.

HTML attributes only support strings. To pass complex data types like objects or arrays to a component, you must set them as DOM properties via JavaScript rather than using HTML attributes.

// ❌ Wrong — attributes only accept strings
// <igc-combo data="[{...}]"></igc-combo>

// ✅ Correct — set via DOM property
const combo = document.querySelector('igc-combo');
combo.data = [
  { value: 1, label: 'Item 1' },
  { value: 2, label: 'Item 2' }
];

The theming system is built on four pillars that work together to define the visual identity of your application:

1. Palette: Color families including primary, secondary, surface, gray, info, success, warn, and error. Each family contains shades from 50 to 900.
2. Typography: Defines the font family and the type scale (headings, body, captions, etc.).
3. Elevations: Defines box-shadow levels ranging from 0 to 24.
4. Schema: Per-component recipes that map palette tokens to specific component-level CSS custom properties.

There are four built-in design systems available, each with light and dark variants:

• Material (light/material.css, dark/material.css)
• Bootstrap (light/bootstrap.css, dark/bootstrap.css)
• Fluent (light/fluent.css, dark/fluent.css)
• Indigo (light/indigo.css, dark/indigo.css)

The igniteui-react package includes full type definitions. All Igr* component props are typed, and DOM queries for the underlying web components are automatically typed via HTMLElementTagNameMap (provided by the igniteui-webcomponents peer dependency).

import { IgrButton } from 'igniteui-react';

// TypeScript knows about all IgrButton props
<IgrButton variant="contained">Click</IgrButton>

// DOM queries are also typed automatically
const button = document.querySelector('igc-button'); // IgbButtonComponent | null

To minimize application bundle size when using igniteui-webcomponents, follow these key principles:

1. Avoid defineAllComponents(): This function imports all 60+ components, adding ~500KB+ to your bundle.
2. Use defineComponents() with named imports: Import only the specific component classes you need to enable effective tree-shaking.
3. Lazy load components: Load heavy components (like dialogs or modals) on demand rather than at application startup.
4. Implement route-based code splitting: Register components within lazy-loaded route modules so they are only included in the chunks required for those specific routes.

import {
  defineComponents,
  IgcButtonComponent,
  IgcInputComponent,
  IgcCardComponent
} from 'igniteui-webcomponents';

defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent);