igniteui-webcomponents/skills/igniteui-wc-integrate-with-framework/SKILL.md

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

---
name: igniteui-wc-integrate-with-framework
description: Integrate Ignite UI Web Components packages into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
user-invocable: true
---

# Integrate with Framework

This skill helps users integrate Ignite UI Web Components into their application. It detects the framework or platform in use and loads the appropriate step-by-step integration reference.

## Before You Answer

- Choose the package first, then load the framework reference.
- Do not assume every setup flow uses `igniteui-webcomponents`.
- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.

### Package Routing

| Component family | Package |
|---|---|
| General UI components | `igniteui-webcomponents` |
| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
| Grid Lite | `igniteui-grid-lite` |
| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |

If the request only says "grid", infer the package from the requested features:

- Use `igniteui-webcomponents-grids` for editing, paging, sorting, filtering, summaries, grouping, hierarchical data, or pivot features.
- Use `igniteui-grid-lite` for lightweight tabular data.

## Example Usage

- "How do I use igniteui-webcomponents in my React app?"
- "Integrate the button component in Angular"
- "Set up igniteui-webcomponents in Vue 3"
- "Help me add web components to my vanilla JS project"

## Related Skills

- [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) - Reduce bundle size after integration
- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Style components after setup

## When to Use

- User wants to add igniteui-webcomponents to a framework project
- User is experiencing framework-specific integration issues
- User needs help with component imports and registration
- User asks about React, Angular, Vue, or vanilla JS setup

---

## Framework Detection

Before loading a reference, identify the target framework from the project context. Check the following signals in order:

### 1. Detect React

**Evidence to look for:**
- `package.json` contains `"react"` or `"react-dom"` in `dependencies` or `devDependencies`
- Files with `.tsx` or `.jsx` extensions exist in `src/`
- Entry point imports `ReactDOM` or `createRoot`
- `vite.config.ts` uses `@vitejs/plugin-react` or `@vitejs/plugin-react-swc`

→ **Load:** [react.md](./references/react.md)

---

### 2. Detect Angular

**Evidence to look for:**
- `package.json` contains `"@angular/core"` in `dependencies`
- `angular.json` file exists in the workspace root
- Files with `.component.ts`, `.module.ts`, or `.component.html` patterns exist
- Entry point calls `bootstrapApplication` or `platformBrowserDynamic`

→ **Load:** [angular.md](./references/angular.md)

---

### 3. Detect Vue 3

**Evidence to look for:**
- `package.json` contains `"vue"` in `dependencies` or `devDependencies`
- Files with `.vue` extensions exist in `src/`
- `vite.config.ts` uses `@vitejs/plugin-vue`
- Entry point calls `createApp`

→ **Load:** [vue.md](./references/vue.md)

---

### 4. Vanilla JavaScript / HTML (fallback)

**Evidence to look for:**
- No major framework found in `package.json`
- Plain `.html` files reference a `<script type="module">`
- Entry point is a plain `.js` or `.ts` file with no framework imports
- User explicitly asks for vanilla JS or HTML integration

→ **Load:** [vanilla-js.md](./references/vanilla-js.md)

---

## If the Framework Cannot Be Determined

Ask the user directly:

> "What framework or platform are you using? (React, Angular, Vue 3, or Vanilla JS / HTML)"

Then load the matching reference from the options above.

---

## Framework Reference Files

| Framework / Platform | Reference |
|----------------------|-----------|
| React | [react.md](./references/react.md) |
| Angular | [angular.md](./references/angular.md) |
| Vue 3 | [vue.md](./references/vue.md) |
| Vanilla JS / HTML | [vanilla-js.md](./references/vanilla-js.md) |

Each reference covers:

- Installation
- Theme import (required for styling)
- Component registration
- Usage examples
- TypeScript support
- Platform-specific considerations
- Common issues and solutions