Ignite UI for React Components

Igr components are React wrappers around igc- web components. Everything below follows from that.

Non-negotiables

1. Import a theme CSS file or components render unstyled with broken icons.
2. No .register() for igniteui-react, igniteui-react-grids, igniteui-react/grid-lite, or igniteui-react-dockmanager — the wrapper registers the element on import. Charts, gauges, and maps (separate legacy packages) do require .register().
3. **CSS selectors must target igc-***, never IgrButton. Use ::part() for shadow DOM internals.
4. Events are CustomEvent, not React SyntheticEvent. Read e.detail.
5. Never set column width on IgrColumn / IgrGridLiteColumn unless asked — see [DATAVIZ.md](./reference/DATAVIZ.md).
6. Charts, gauges, maps, and grids need an explicitly sized container or they render at zero height.

Packages

Commercial packages also publish under @infragistics/… for licensed workspaces; use that scope and its matching CSS path when the workspace already uses it. igniteui-grid-lite is an optional peer of igniteui-react — Grid Lite needs both installed.

Quick start

npm install igniteui-react

// main.tsx — theme first, your overrides after
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

<IgrInput label="Name" />
<IgrButton>Submit</IgrButton>

Themes: igniteui-webcomponents/themes/{light|dark}/{bootstrap|material|fluent|indigo}.css. Grids need a second import: igniteui-react-grids/grids/themes/{light|dark}/<design-system>.css. Next.js has no single entry point — import the theme CSS in app/layout.tsx or in each 'use client' file that uses components.

Reference

Verify before you write

Component APIs change between versions. Prefer the igniteui-cli MCP server (getdoc, getapireference, searchapi) over recall for prop names, slot names, event names, and enum values — see [MCP.md](./reference/MCP.md). Without MCP, read the installed .d.ts files under node_modules/igniteui-webcomponents/components/<component>/ (or igniteui-webcomponents-grids/grids/lib/), which carry @slot, @csspart, @fires, and @cssproperty annotations.

Related skills

• [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — brand colors, dark mode, component tokens
• [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — code splitting heavy families
• [grid-lite-to-igr-grid-migration](../grid-lite-to-igr-grid-migration/SKILL.md) — Grid Lite → premium IgrGrid