Ignite UI for React - from Infragistics

Ignite UI for React includes a wide range of easy to use React UI components that have been designed and optimized for high-performance, high-volume data scenarios. Ignite UI for React is designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA's) targeting the React framework.

Browser Support

| | | | | | | --------------- | ---------------- | ------------- | -------------- | --------------- | | Latest ✔️ | Latest ✔️ | Latest ✔️ | Latest ✔️ | Latest ✔️ |

Components

This package provides the following components:

| Component | Status | Documentation | |:----------|:------:|:-------------:| | Grid Lite (requires igniteui-grid-lite) | ✅ | Docs | | AI Chat | ✅ | Docs | | Accordion | ✅ | Docs | | Avatar | ✅ | Docs | | Badge | ✅ | Docs | | Banner | ✅ | Docs | | Button | ✅ | Docs | | Button Group | ✅ | Docs | | Calendar | ✅ | Docs | | Card | ✅ | Docs | | Carousel | ✅ | Docs | | Checkbox | ✅ | Docs | | Chip | ✅ | Docs | | ComboBox | ✅ | Docs | | Date Picker | ✅ | Docs | | Date Range Picker | ✅ | Docs | | Date Time Input | ✅ | Docs | | Dialog | ✅ | Docs | | Divider | ✅ | Docs | | Dropdown | ✅ | Docs | | Expansion Panel | ✅ | Docs | | Icon | ✅ | Docs | | Icon Button | ✅ | Docs | | Input | ✅ | Docs | | Linear Progress | ✅ | Docs | | List | ✅ | Docs | | Mask Input | ✅ | Docs | | Navigation Bar (Navbar) | ✅ | Docs | | Navigation Drawer | ✅ | Docs | | Radio & Radio Group | ✅ | Docs | | Rating | ✅ | Docs | | Ripple | ✅ | Docs | | Select | ✅ | Docs | | Slider & Range Slider | ✅ | Docs | | Snackbar | ✅ | Docs | | Stepper | ✅ | Docs | | Switch | ✅ | Docs | | Tabs | ✅ | Docs | | Text Area | ✅ | Docs | | Tile Manager | ✅ | Docs | | Toast | ✅ | Docs | | Tooltip | ✅ | Docs | | Tree | ✅ | Docs |

AI-Assisted Development

Ignite UI for React provides a toolchain to enhance the AI coding workflow — Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server, and the MAKER MCP server — that grounds AI coding assistants in correct component APIs, import paths, and design tokens.

| Component | What it provides | |:----------|:----------------| | Agent Skills | Structured specialized knowledge and workflow files: import paths, component patterns, decision flows, generate from image design | | CLI MCP server (igniteui-cli) | Documentation queries, API reference, project scaffolding tools via MCP | | Theming MCP server (igniteui-theming) | Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation | | MAKER MCP server (@igniteui/maker-mcp) | Multi-agent orchestration: decomposes complex tasks into validated, executable step plans |

Note: All AI toolchain commands require Ignite UI CLI 15.0.0 or newer.

Add AI toolchain to an existing project

Run this command from the root of your project:

ig ai-config

If the Ignite UI CLI is not installed globally, run npm install -g igniteui-cli.

This adds Agent Skills and instructions to agent discovery path(s) and configures MCP server entries.

Start a new project with AI toolchain

Run the Ignite UI CLI to scaffold a new React project with the AI toolchain configured from the start:

ig new

If the Ignite UI CLI is not installed globally, run npm install -g igniteui-cli.

Agent Skills

This package ships with Agent Skills — structured knowledge files that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the igniteui-react package and also live in the skills/ directory.

| Skill | Description | |:------|:------------| | components | Identify the right React components (Igr*) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup | | customize-theme | Customize styling using CSS custom properties, Sass, and the theming system in React | | optimize-bundle-size | Reduce bundle size with granular imports, tree-shaking, and lazy loading | | generate-from-image-design | Turn a screenshot, mockup, or wireframe into a React view using Ignite UI components, MCP-guided theming, and screenshot-first layout matching |

When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths.

For full setup instructions, see the AI-Assisted Development documentation.

License

MIT-licensed package. See LICENSE for details.