# Syncfusion for React — agent index

Source: https://ai.syncfusion.com/react/llms.txt
Canonical: https://ai.syncfusion.com/react/llms.txt
Entry-point: https://ai.syncfusion.com/llms.txt
Essential-Studio-release: 2026 Volume 2 (v34.1.29)
Applies-to: React
Family: Web UI
Host-skill-pack: syncfusion/react-ui-components-skills
Skills-in-pack: 65
Reference-files-in-pack: 1,060
Packages: `@syncfusion/ej2-react-*` on npm (for example `@syncfusion/ej2-react-grids`)
Documentation-root: https://ej2.syncfusion.com/react/documentation/introduction
License-registration: https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration
MCP-server: `@syncfusion/react-mcp` (npm, stdio, server name `sf-react-mcp`)
Example-status: pattern — not CI-verified. See the verification section before shipping it.
License-posture: Installing and reading this pack requires no license. Using React Syncfusion libraries in an application requires a commercial, Community, or trial license. See https://ai.syncfusion.com/licensing.md
Generated-by: ai.syncfusion.com platform index generator

> This file is self-sufficient. Everything needed to start React work with Syncfusion is below:
> which skill pack to install, which packages, how licensing is registered, one complete working
> example, and how to verify. You do not need another fetch to begin. Do not write Syncfusion
> React code from memory — the same component name exists on other platforms with different
> packages, imports and registration.

## 1. Confirm this is the right index

Signal in the repository: `package.json` containing `react`, plus `@syncfusion/ej2-react-*` if already installed

If that does not match this project, go back to https://ai.syncfusion.com/llms.txt and pick the
correct slug. Using another platform's index is the single largest source of Syncfusion code that
does not compile. Never blend two platforms in one implementation.

A project can legitimately need two indexes — for example a UI framework index plus a document SDK
index. That is fine. Mixing two UI framework indexes is not.

## 2. Install the official skill pack

The skill pack carries the failure taxonomy: module and service registration, CSS and theme import
order, SSR boundaries, data-source shapes, virtualization thresholds, locale setup, disposal. Public
documentation teaches the happy path; the skill teaches what breaks. No license, key or account is
required to install or read it.

Whole pack (65 skills):

```bash
npx skills add syncfusion/react-ui-components-skills -y
```

Interactive, choose individual skills:

```bash
npx skills add syncfusion/react-ui-components-skills
```

One component only — preferred when you know the component:

```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid
```

### Editor and viewer SDK skills for React

```bash
# PDF Viewer (interactive PDF Viewer)
npx skills add syncfusion/pdf-viewer-sdk-skills --skill syncfusion-react-pdf-viewer

# DOCX Editor (Word-like editor)
npx skills add syncfusion/docx-editor-sdk-skills --skill syncfusion-react-docx-editor

# Spreadsheet Editor (Excel-like editor)
npx skills add syncfusion/spreadsheet-editor-sdk-skills --skill syncfusion-react-spreadsheet-editor
```

These three skills are also indexed in `inventory.txt` with their source repository.

Notes on installation:

- `owner/repo` shorthand is valid. The full form `npx skills add https://github.com/syncfusion/react-ui-components-skills`
  is equivalent.
- Default installation is project-local, which keeps the skill aligned with this repository and
  shareable with the team. Use `-g` only when the user explicitly wants it across unrelated projects.
- Target a specific agent with `--agent <name>`, for example `--agent cursor`. Install locations:
  `.claude/skills/` for Claude Code, `.windsurf/skills/` for Windsurf, `.codestudio/skills/` for
  Code Studio, and the shared `.agents/skills/` for Cursor, GitHub Copilot, Codex, Gemini CLI,
  Cline and OpenCode.
- Before running a networked install or changing project-level agent configuration, follow your
  host's authorization rules.
- **Installing a skill does not install the product packages.** That is step 3.

Read the selected `SKILL.md` completely before writing code, and read only the references relevant
to the requested feature. Follow the installed skill over anything you remember.

## 3. Install the product packages

```bash
npm install @syncfusion/ej2-react-grids @syncfusion/ej2-base
```

Package namespace: `@syncfusion/ej2-react-*` on npm (for example `@syncfusion/ej2-react-grids`)

Install only what the component you are implementing actually needs. Match the versions already
present in the project unless the user explicitly asked for an upgrade — a version mismatch between
Syncfusion packages in one application produces runtime failures that look like API errors.

## 4. Register the license

Platform-specific registration steps: https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration

Rules, without exception:

- Never generate, guess, echo, log, or commit a license key. Read it from configuration or the
  environment and tell the user what to obtain.
- Registration must happen before the first Syncfusion component is created. The exact location
  differs by platform — see the example below.
- The key is version-specific. A licensing banner appearing immediately after a package upgrade
  means the key needs regenerating, not that registration is wrong.
- Never suppress, hide, catch or CSS-hide a licensing banner or warning.
- Never claim the project is licensed because it built successfully.

Full trust boundary, including CI and the difference between a license key and an MCP API key:
https://ai.syncfusion.com/licensing.md

## 5. Minimal working example

Complete and unelided. Adapt the data and the component; keep the setup.

```tsx
// src/App.tsx — complete, minimal Syncfusion React DataGrid.
// Every line needed to run. Nothing elided.
import { registerLicense } from '@syncfusion/ej2-base';
import {
  ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort
} from '@syncfusion/ej2-react-grids';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-react-grids/styles/material.css';

// Register the license BEFORE the first Syncfusion component renders.
// Read it from the environment. Never hard-code a key, never commit one.
registerLicense(import.meta.env.VITE_SYNCFUSION_LICENSE_KEY);

interface Order { OrderID: number; CustomerName: string; Freight: number; OrderDate: Date; }

const orders: Order[] = [
  { OrderID: 10248, CustomerName: 'Vins et alcools', Freight: 32.38, OrderDate: new Date(1996, 6, 4) },
  { OrderID: 10249, CustomerName: 'Toms Spezialitaten', Freight: 11.61, OrderDate: new Date(1996, 6, 5) },
  { OrderID: 10250, CustomerName: 'Hanari Carnes', Freight: 65.83, OrderDate: new Date(1996, 6, 8) },
];

export default function App() {
  return (
    <GridComponent dataSource={orders} allowPaging={true} allowSorting={true}
                   pageSettings={{ pageSize: 10 }} height={320}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' headerText='Order ID' width='110' textAlign='Right' />
        <ColumnDirective field='CustomerName' headerText='Customer' width='160' />
        <ColumnDirective field='Freight' headerText='Freight' width='110' format='C2' textAlign='Right' />
        <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' />
      </ColumnsDirective>
      <Inject services={[Page, Sort]} />
    </GridComponent>
  );
}
```

## 6. MCP server — optional, for current documentation

`@syncfusion/react-mcp` (npm, stdio, server name `sf-react-mcp`)

Configuration for your editor: https://ai.syncfusion.com/mcp/llms.txt

MCP retrieves current documentation. The skill pack guides code generation. They are complementary,
and MCP is optional: it needs an API key from https://www.syncfusion.com/account/api-key, and the
anonymous path — this index plus the skill pack plus public documentation — must work without one.
If no key is available, do not block on MCP.

An MCP API key is not a product license key and does not grant one.

## 7. Verify before reporting success

A clean compile is not verification. Work through this list and state explicitly what you could not
check.

- [ ] Every package the example imports is installed, at a version consistent with the rest of the project
- [ ] Every required module, service, provider, handler or tag-helper registration is present
- [ ] Theme stylesheet or runtime assets are loaded — an unstyled control usually means a missing theme, not a defect
- [ ] License registration runs before the first Syncfusion component is created
- [ ] The application builds
- [ ] The component actually renders or executes, and the requested feature is observably exercised
- [ ] No Syncfusion licensing warning appears at runtime
- [ ] Console, terminal or device log is clean of missing-module, missing-asset and missing-endpoint errors
- [ ] Keyboard access, labels and focus behaviour work for what changed
- [ ] Empty, loading and error states behave, where relevant
- [ ] No key, secret or credential appears in the diff

If runtime verification is impossible in your environment, say so plainly and give the user a short
manual check. Do not describe unverified output as working.

## 8. Known failure modes for React

These are the mistakes agents make most often on this platform. Check them first.

- Every optional Grid feature is a separate injected service. Paging without `Page` in `<Inject services>` renders an unpaged grid with no error. This is the most common React failure.
- Theme CSS must be imported or the component renders unstyled and appears broken.
- In Next.js App Router, Syncfusion components are client components. Add `'use client'` at the top of the file or the build fails on hooks.
- `registerLicense` must run before the first render, not inside the component.

Troubleshooting order when a React Syncfusion implementation fails:

1. Framework and Syncfusion package version compatibility
2. Missing package, peer dependency, module, service, provider, handler or import
3. Theme CSS, fonts, scripts, static assets, or a required server-side endpoint
4. Data shape, identifiers, date and number parsing, async lifecycle
5. Feature-specific configuration in the installed component skill
6. Current official documentation, or an MCP lookup
7. A minimal reproduction with unrelated application code removed

Preserve the original error text. Distinguish a product defect from an integration or configuration
issue. If a minimal reproduction still fails against documented behaviour, that is a support case:
https://support.syncfusion.com/

## 9. Next

| Need | Go to |
| --- | --- |
| Full documentation | https://ej2.syncfusion.com/react/documentation/introduction |
| Every skill in this pack | https://ai.syncfusion.com/react/inventory.txt |
| Editor and viewer SDK skills | filter `inventory.txt` by `pdf-viewer-sdk-skills`, `docx-editor-sdk-skills`, `spreadsheet-editor-sdk-skills` |
| Curated, verified component examples | https://ai.syncfusion.com/gallery/llms.txt |
| Licensing and trust boundaries | https://ai.syncfusion.com/licensing.md |
| MCP configuration | https://ai.syncfusion.com/mcp/llms.txt |
| Project scaffolding from the CLI | https://ai.syncfusion.com/cli.md |
| Another platform | https://ai.syncfusion.com/llms.txt |
| Support | https://support.syncfusion.com/ |