Igniteui React Components

• 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