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.
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.
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 |
| Reveal SDK | REVEAL-SDK.md | Embedded BI dashboards, theme sync |
| Troubleshooting | TROUBLESHOOTING.md | Common issues and solutions |
npm install igniteui-react
// 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.
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).
Use COMPONENT-CATALOGUE.md to map any UI need to the right Igr* component and package. For quick guidance:
igniteui-react) — inputs, buttons, layout, navigation, notifications, scheduling, AI chatIgrGridLite from igniteui-react/grid-lite (requires both igniteui-react and igniteui-grid-lite)igniteui-react-grids (advanced grids), igniteui-react-charts, igniteui-react-gauges, igniteui-react-mapsigniteui-react-grids/grids/themes/...slot attribute for named slots: <span slot="icon">📊</span>IgrTab with inline content (label via label prop or slot="label")IgrTab with label-only (no inline content)CustomEvent objects, not React SyntheticEvente.target or e.detailuseRef<IgrDialog>(null) with the component type:IgrCategoryChartModule.register()min-width, min-height, or flex-growigniteui-react and igniteui-grid-lite packages, import from igniteui-react/grid-liteigniteui-react) — it covers most common UI needs.register() at module levelCustomEvent — not React.SyntheticEvent