/igniteui-react-components

name: igniteui-react-components
description: 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.
user-invocable: true

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

| Component family | Install packages | Import from | |---|---|---| | Core UI components | `igniteui-react` | `igniteui-react` | | Advanced grids | `igniteui-react-grids` (trial) `@infragistics/igniteui-react-grids` (licensed) | `igniteui-react-grids` | | Grid Lite | `igniteui-react`, `igniteui-grid-lite` | `igniteui-react`, `igniteui-grid-lite` | | Charts | `igniteui-react-charts` (trial) `@infragistics/igniteui-react-charts` (licensed) | `igniteui-react-charts` | | Gauges | `igniteui-react-gauges` (trial) `@infragistics/igniteui-react-gauges` (licensed) | `igniteui-react-gauges` | | Maps | `igniteui-react-maps` (trial) `@infragistics/igniteui-react-maps` (licensed) | `igniteui-react-maps` |

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](../igniteui-react-customize-theme/SKILL.md) — Theme and style components
• [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — 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:

| Topic | File | When to Use | |---|---|---| | Component Catalogue | [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) | Mapping UI patterns to components, available packages, common UI scenarios | | Installation & Setup | [INSTALLATION.md](./reference/INSTALLATION.md) | Setting up packages, importing theme CSS, Next.js setup | | JSX Patterns | [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md) | Props, children, slots, IgrTabs content vs navigation | | Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events | | Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form | | Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing | | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions |

---

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](./reference/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](./reference/CHARTS-GRIDS.md) for exceptions (charts, gauges, maps).

---

Key Concepts

Choosing the Right Component

Use [COMPONENT-CATALOGUE.md](./reference/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

• **