Ignite UI for React

https://www.infragistics.com/products/ignite-ui-react/react/
Admin
Ignite UI for React is a comprehensive UI component library that enables developers to build modern,...
Tokens:344,750
Snippets:3,748
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Create Project in Guided Mode

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/cli-mcp

Starts the CLI in guided mode to walk through project creation options.

```bash
ig new
```

```bash
npx --package igniteui-cli igniteui new
```

--------------------------------

### Install Ignite UI and Update Skills

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview

Install the framework package and re-run the configuration command to add skills to an existing setup.

```bash
npm install igniteui-react
npx igniteui-cli@latest ai-config
```

--------------------------------

### Initialize Ignite UI CLI Wizard

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Starts the interactive guided mode for creating and configuring a new application.

```cmd
ig
```

--------------------------------

### Start the Application

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-step-by-step-guide-using-cli

Builds the project, starts the local web server, and opens the application in the default browser.

```cmd
ig start
```

--------------------------------

### Install Theming Tools

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/cli-mcp

Installs the igniteui-theming package if it is not already available in the project.

```bash
npm install igniteui-theming
```

--------------------------------

### Install React chart dependencies

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/zoomslider-overview

Install the required core and charts packages via npm.

```cmd
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
```

--------------------------------

### Start Application Development Server

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-cli-overview

Commands to start the local development server using the CLI wrapper or directly via Vite.

```cmd
ig start
```

```cmd
npm run dev
```

--------------------------------

### Install Excel Library Dependencies

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/excel-library

Install the required core and excel packages via npm.

```cmd
npm install --save igniteui-react-core
npm install --save igniteui-react-excel
```

--------------------------------

### Install localization resources

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/localization

Install the required package containing localized resource strings for all supported languages.

```plaintext
npm install igniteui-i18n-resources --save-dev
```

--------------------------------

### Install Ignite UI for React dependencies

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/color-editor

Run these commands to install the necessary core and input packages for the Color Editor.

```cmd
npm install igniteui-react-core
npm install igniteui-react-inputs
```

--------------------------------

### Install Ignite UI for React Query Builder

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/query-builder

Run this command to install the necessary packages for the Query Builder component.

```cmd
npm install igniteui-react igniteui-react-grids
```

--------------------------------

### Run the development server

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Start the local development server to view the application.

```cmd
npm run dev
```

--------------------------------

### Install Ignite UI CLI globally

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-cli-overview

Use npm or yarn to install the CLI globally on your system.

```bash
npm install -g igniteui-cli
```

```cmd
yarn global add igniteui-cli
```

--------------------------------

### Verify Ignite UI CLI installation

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-cli-overview

Check the installed version of the CLI to ensure it is correctly configured.

```bash
ig version
```

--------------------------------

### Install React Data Grid dependencies

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid

Install the required Ignite UI for React packages via npm.

```cmd
npm install --save igniteui-react
npm install --save igniteui-react-grids
```

--------------------------------

### Install Ignite UI for React

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list

Command to install the required npm package for Ignite UI for React components.

```cmd
npm install igniteui-react
```

--------------------------------

### Install Dock Manager Package

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/dock-manager

Use npm to install the required package for the Dock Manager component.

```cmd
npm install --save igniteui-react-dockmanager
```

--------------------------------

### Install Scoped Ignite UI Packages

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-licensing

Commands to remove trial packages and install the licensed scoped versions from the private feed.

```cmd
npm uninstall igniteui-react-dockmanager
npm install @infragistics/igniteui-react-dockmanager

npm uninstall igniteui-react-dockmanager
npm install @infragistics/igniteui-react-dockmanager
```

--------------------------------

### Install Gemini skills via CLI

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/skills

Commands to install skills from a Git repository into either the user scope or the workspace scope.

```bash
gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components
gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme
gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size
gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-generate-from-image-design
```

```bash
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-generate-from-image-design
```

--------------------------------

### Install Ignite UI CLI Globally

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/cli-mcp

Installs the CLI globally to enable the 'ig' command in any terminal session.

```bash
npm install -g igniteui-cli
```

--------------------------------

### Configuring Grid with ColumnInit

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/state-persistence

Setup for the IgrGrid component with a columnInit event handler.

```tsx
<IgrGrid columnInit={onColumnInit}>
    <IgrGridState></IgrGridState>
    <IgrColumn field="IsActive" header="IsActive" bodyTemplate={activeTemplate}></IgrColumn>
</IgrGrid>
```

--------------------------------

### Install Ignite UI React Grids package

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Add the required package to your project dependencies.

```cmd
npm install igniteui-react-grids --save
```

--------------------------------

### Grid Component Setup

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/search

Basic configuration for the IgrGrid component with columns defined.

```tsx
<IgrGrid ref={gridRef} className="gridSize" autoGenerate={false} allowFiltering={true} data={data}>
    <IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
    <IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
</IgrGrid>
```

--------------------------------

### Get selected data formats

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/cell-selection

Examples of the data structure returned by getSelectedData based on different selection patterns.

```typescript
expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
```

```typescript
expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
```

```typescript
expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
```

```typescript
expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
```

```typescript
expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
```

```typescript
expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
```

--------------------------------

### Launch the Add Component Wizard

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-step-by-step-guide-using-cli

Initiates the interactive wizard to select and add component templates to an existing project.

```cmd
ig add
```

--------------------------------

### Initialize project with Ignite UI CLI

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-how-to-mcp-e2e

Commands to create a new project using npx or the global CLI, with options for guided mode or direct framework specification.

```bash
npx ig new
```

```bash
ig new
```

```bash
npx ig new
```

```bash
ig new my-app --framework=react
```

```bash
npx ig new my-app --framework=react
```

--------------------------------

### Scaffold a new React project with Vite

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Use the Vite CLI to initialize a new React application.

```cmd
npm create vite@latest
```

--------------------------------

### JSON Data Structure Example

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/geo-map-binding-data-json-points

Example format for geographic data stored in a JSON file.

```json
[
   { "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 },
   { "name": "Sydney Creek",  "lat": -16.3,     "lon": 128.95 },
   { "name": "Mount Sydney",  "lat": -21.39864, "lon": 121.193 },
 // ...
]
```

--------------------------------

### Install Grid Lite via Package Manager

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/overview

Use npm or yarn to add the igniteui-react package to your project.

```cmd
npm install igniteui-react --save
```

```cmd
yarn add igniteui-react
```

--------------------------------

### Create a React Project Directly

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-cli-overview

Scaffold a new React project non-interactively by specifying the project name, framework, and template.

```cmd
ig new <project-name> --framework=react --template=side-nav
```

--------------------------------

### CSV Data Format Example

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/geo-map-binding-data-csv

Example structure of a CSV file containing geographic location data.

```csv
City,Lat,Lon,State,Code,County,Density,Population
New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
```

--------------------------------

### Upgrade to Licensed Version

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Run this command in the project root to upgrade from the default trial version to the licensed version.

```bash
ig upgrade-packages
```

--------------------------------

### Create Project with Direct Command

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/cli-mcp

Creates a project using specific settings provided directly in the command.

```bash
ig new my-app --framework=react --type=igr-ts --template=side-nav
```

```bash
npx ig new my-app --framework=react --template=side-nav
```

--------------------------------

### Create a new Next.js project

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/nextjs-usage

Commands to initialize a new Next.js application using npx.

```cmd
npx create-next-app@latest MyAppName
cd MyAppName
```

--------------------------------

### Pivot Grid State Persistence Setup

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/state-persistence

Initial setup for the Pivot Grid including imports and state configuration.

```typescript
import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client";

import {
  IgrGridState,
  IgrGridStateOptions,
  IgrPivotGrid,
  IgrPivotConfiguration,
  IgrPivotValueEventArgs,
  IgrPivotValue,
  GridSelectionMode,
} from "@infragistics/igniteui-react-grids";
import {
  IgrButton,
  IgrCheckbox,
  IgrCheckboxChangeEventArgs,
  IgrIcon,
  registerIconFromText,
} from "@infragistics/igniteui-react";
import { PivotDataFlat } from "./PivotDataFlat";

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import "./index.css";

const restoreIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>';
const saveIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z"/></svg>';
const clearIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
const forwardIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>';
const deleteIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>';
const refreshIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>';

export default function App() {
  const gridData = new PivotDataFlat();
  const stateKey = "pivot-grid-state";

  const [allOptions, setAllOptions] = useState(true);
  const [options, setOption] = useState<IgrGridStateOptions>({
    cellSelection: true,
    filtering: true,
    sorting: true,
    expansion: true,
    columnSelection: true,
    pivotConfiguration: true,
  });
```

--------------------------------

### Create Project via CLI Command

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started

Scaffolds a new React project directly using specific framework, type, and template flags.

```cmd
ig new <project-name> --framework=react --type=igr-ts --template=side-nav
```

--------------------------------

### Install Geographic Map Dependencies

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/geo-map

Run these commands to install the necessary core, charts, and maps packages for the geographic map component.

```cmd
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
npm install --save igniteui-react-maps
```

--------------------------------

### Install Ignite UI for React dependencies

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/menus/toolbar

Required packages for layouts, inputs, charts, and core functionality.

```cmd
npm install igniteui-react-layouts
npm install igniteui-react-inputs
npm install igniteui-react-charts
npm install igniteui-react-core
```

--------------------------------

### Generic MCP Client Configuration

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/cli-mcp

Use these launch commands for clients requiring STDIO transport.

```bash
npx -y igniteui-cli mcp
npx -y igniteui-theming igniteui-theming-mcp
```

--------------------------------

### Pivot Value Calculation Keys Example

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview

Example data structure demonstrating aggregated values and hierarchy keys used by the Pivot Grid.

```json
[
  {
    ProductCategory: 'All', AllProducts: 'All Products', All: 1000, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524,
    AllProducts_records: [
      { ProductCategory: 'Clothing', 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456 },
      { ProductCategory: 'Bikes', 'All-Uruguay': 68 },
      { ProductCategory: 'Accessories', 'All-USA': 293 },
      { ProductCategory: 'Components', 'All-USA': 240 }
    ]
  }
];
```

--------------------------------

### Configure AI Toolchain

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview

Run this command from the project root to set up MCP servers and skill files.

```bash
npx igniteui-cli ai-config
```

--------------------------------

### Labeling the Switch

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/switch

Examples of adding labels to the switch component.

```tsx
<IgrSwitch><span>Label</span></IgrSwitch>
```

```tsx
<IgrSwitch aria-labelledby="switchLabel" labelPosition="before" ><span id="switch-label">Label</span></IgrSwitch>
```

```tsx
<>
    <span id="switch-label">Label</span>
    <IgrSwitch aria-labelledby="switch-label"></IgrSwitch>
</>
```

--------------------------------

### Import IgrTooltip

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip

Include the component and the required theme CSS in your project.

```tsx
import { IgrTooltip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

--------------------------------

### List Available Templates

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/general-cli-overview

Displays all component templates available for the current project context.

```cmd
ig list
```

--------------------------------

### Disable a Tab

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs

Example of setting the disabled attribute on an IgrTab component.

```tsx
<IgrTab label="Tab 1" disabled={true}></IgrTab>
```

--------------------------------

### filterExpressions

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/filtering

Property to get or set the current filter state of the grid.

```APIDOC
## filterExpressions

### Description
Allows declarative control over the grid's filter state. Can be used as an initial property on the component or accessed to retrieve the current filter state.
```

--------------------------------

### sortingExpressions

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/sorting

Property to get or set the current sorting state of the grid.

```APIDOC
## sortingExpressions

### Description
A property used to get the current sort state or set the initial sort state of the grid component.

### Usage Example
```typescript
// Setting initial state
const sortState: SortingExpression<Products>[] = [
  { key: 'price', direction: 'descending' },
  { key: 'name', direction: 'ascending', caseSensitive: true },
];
<IgrGridLite sortingExpressions={sortState} />

// Getting current state
const state = gridRef.current.sortingExpressions;
```
```

--------------------------------

### Configure VS Code Copilot Instructions

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/theming-mcp

Define theming conventions in .github/copilot-instructions.md to guide AI code generation.

```markdown
## Theming Conventions

### Sass Code Style
- Use `@use` / `@forward` — never `@import`.
- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`).
- Prefer setting primary design tokens over overriding many dependent tokens.
  For example, setting `$foreground` on a flat button automatically derives
  `$hover-background`, `$focus-background`, and `$active-background`.
- Keep component overrides scoped — use the component's default selector
  (e.g., `.igx-button--flat`) unless a narrower scope is needed.
```

--------------------------------

### Configure Column Widths in Pixels and Percentages

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/column-resizing

Demonstrates defining column widths using a mix of percentages, fixed pixels, and default auto-sizing.

```tsx
<IgrGrid id="grid" autoGenerate={false}>
    <IgrColumn field="ID" width="10%" resizable={true}></IgrColumn>
    <IgrColumn field="CompanyName" width="100px" resizable={true}></IgrColumn>
    <IgrColumn field="ContactTitle" resizable={true}></IgrColumn>
</IgrGrid>
```

--------------------------------

### Switch State Attributes

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/switch

Examples of setting checked, required, and disabled states.

```tsx
<IgrSwitch checked={true}></IgrSwitch>
```

```tsx
<IgrSwitch required={true}></IgrSwitch>
```

```tsx
<IgrSwitch disabled="true"></IgrSwitch>
```

--------------------------------

### Run Ignite UI Theming MCP Server

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview

Executes the Theming MCP server using npx to provide design token and theming context to AI agents.

```bash
npx -y igniteui-theming igniteui-theming-mcp
```

--------------------------------

### Basic Chip Usage

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/chip

Examples of basic, selectable, and removable chip configurations.

```tsx
<IgrChip></IgrChip>
```

```tsx
<IgrChip selectable={true}></IgrChip>
```

```tsx
<IgrChip removable={true}></IgrChip>
```

--------------------------------

### Configure Cursor Rules

Source: https://www.infragistics.com/products/ignite-ui-react/react/components/ai/theming-mcp

Create a .cursor/rules/theming.mdc file to enforce project-specific theming rules and file conventions.

```markdown
---
description: Ignite UI for React theming conventions
globs: ["**/*.scss", "**/styles/**"]
---

## Project Theming Rules

### Code conventions
- `@use` / `@forward` only — no `@import`.
- Extract shared colors into variables; do not repeat hex literals.
- Prefer primary tokens — let dependent tokens derive automatically.
- One component override per file. Name the file after the component.
- Comment every override with the design rationale.
- Never hard-code gray shades for text — use palette grays so dark mode works.
- For dark mode, only the palette changes. Component overrides stay the same.
```
Tokens:
Raw