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

This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.

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:

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