Ignite UI for React Components

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 process steps described below.

>

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-SERVER.md`](./reference/MCP-SERVER.md). Read that file for editor-specific configuration steps and verification.

Package Routing

Example Usage

• "What component should I use to display a list of items with actions?"
• "I need a date picker for a booking form in React"
• "Build a dashboard layout with cards and a data grid"
• "What's the best component for a navigation sidebar?"
• "I need a searchable dropdown with multi-select"
• "How do I install Ignite UI for React?"
• "Set up igniteui-react in my project"
• "How do I handle events on IgrCombo?"
• "How do I use IgrInput with React Hook Form?"
• "Show me how to use refs with IgrDialog"
• "What TypeScript types should I use for IgrButton props?"
• "How do I pass children vs slots to Ignite UI components?"

Related Skills

• igniteui-react-customize-theme — Theme and style components
• igniteui-react-optimize-bundle-size — Reduce bundle size

When to Use

• Deciding 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
• Setting up Ignite UI for React in a new or existing project
• Writing JSX that uses Ignite UI components
• Handling events from Ignite UI components
• Integrating components with React state or form libraries
• Using refs to call imperative methods on components
• Working with TypeScript prop types

Content Guide

This skill is organized into focused reference files. Load the appropriate file for the situation:

Quick Start

1. Install

npm install igniteui-react

2. Import Theme CSS (REQUIRED)

// main.tsx
import 'igniteui-webcomponents/themes/light/bootstrap.css';

CRITICAL: Without the theme CSS, components will render without styles and icons will be broken. See INSTALLATION.md for all available themes and setup.

3. Use Components

import { IgrButton, IgrInput } from 'igniteui-react';

function App() {
  return (
    <div>
      <IgrInput label="Name" />
      <IgrButton><span>Submit</span></IgrButton>
    </div>
  );
}

No `defineComponents()` needed. React wrappers auto-register. See CHARTS-GRIDS.md for exceptions (charts, gauges, maps).

Key Concepts

Choosing the Right Component

Use COMPONENT-CATALOGUE.md to map any UI need to the right Igr* component and package. For quick guidance:

• MIT package (igniteui-react) — inputs, buttons, layout, navigation, notifications, scheduling, AI chat
• Lightweight grid (MIT) — IgrGridLite from igniteui-react/grid-lite (requires both igniteui-react and igniteui-grid-lite)
• Commercial — igniteui-react-grids (advanced grids), igniteui-react-charts, igniteui-react-gauges, igniteui-react-maps

Theme CSS Import

• Always import theme CSS before using components. For grids, also import igniteui-react-grids/grids/themes/...
• see INSTALLATION.md

JSX Patterns

• Use props just like any React component
• Use slot attribute for named slots: <span slot="icon">📊</span>
• See JSX-PATTERNS.md

IgrTabs: Content vs Navigation

• Content panels: Use IgrTab with inline content (label via label prop or slot="label")
• Navigation (router): Use only `IgrTab` with label-only (no inline content)
• See JSX-PATTERNS.md

Events

• Events are CustomEvent objects, not React SyntheticEvent
• Access data via e.target or e.detail
• See EVENT-HANDLING.md

Refs

• Use useRef<IgrDialog>(null) with the component type:
• See REFS-FORMS.md

Charts, Gauges, Maps & Grid Lite

• Charts/Gauges/Maps require explicit registration: IgrCategoryChartModule.register()
• All require sized container: min-width, min-height, or flex-grow
• Grid Lite requires both igniteui-react and igniteui-grid-lite packages, import from igniteui-react/grid-lite
• See CHARTS-GRIDS.md

Best Practices

1. Start with the MIT package (igniteui-react) — it covers most common UI needs
2. Import theme CSS first — components need it to render correctly
3. Register chart/gauge/map modules — call .register() at module level
4. Wrap charts/gauges/maps in sized containers — they need explicit dimensions
5. Use named imports — enables tree-shaking
6. Handle events as `CustomEvent` — not React.SyntheticEvent
7. Use refs sparingly — prefer declarative props
8. Check slot names in the docs

Additional Resources

• Ignite UI for React — Getting Started
• React Examples Repository
• npm: igniteui-react
• @lit/react Documentation