# use-igniteui-blazor

Sets up and configures Ignite UI for Blazor Lite components in .NET 8.0+ applications. It configures packages, styles, and interactive render modes.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 installs · ★ 5730
- Author: dotnet
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dotnet/skills/tree/HEAD/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/use-igniteui-blazor

## What it does

This skill guides agents through integrating `IgniteUI.Blazor.Lite` and `IgniteUI.Blazor.GridLite` into Blazor Server, WASM, Hybrid, and split Web App architectures. It manages `AddIgniteUIBlazor()` registration in `Program.cs`, imports the control namespace, and wires the chosen theme stylesheet into the host page. Missing stylesheets cause controls to render unstyled.

The lowest supported target framework is .NET 8.0. Static SSR cannot run these components, making an interactive render mode like `InteractiveServer` or `InteractiveWebAssembly` mandatory. If the project already references full or trial Ignite UI packages, the skill avoids introducing Lite packages unless explicitly asked to replace them.

For split Blazor Web Apps, package references and service registrations are applied to both server and client projects. When working only with `GridLite`, service registration is bypassed entirely, keeping the setup minimal.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill use-igniteui-blazor -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/use-igniteui-blazor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/use-igniteui-blazor/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill use-igniteui-blazor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/use-igniteui-blazor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill use-igniteui-blazor -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/use-igniteui-blazor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dotnet/skills use-igniteui-blazor
```

2. **Manually: put the files in place**
- File: `.github/skills/use-igniteui-blazor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill use-igniteui-blazor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dotnet/skills --path plugins/dotnet-blazor/skills/use-igniteui-blazor
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/use-igniteui-blazor/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill use-igniteui-blazor -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dotnet/skills/tree/HEAD/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md

## When to use it
- add Ignite UI Lite packages to a Blazor solution
- register AddIgniteUIBlazor across server and client projects
- link the theme stylesheet in host markup
- verify interactive render modes for components

## Example prompts
- Add IgniteUI.Blazor.Lite to this Blazor Web App and register the input and dialog modules
- Configure the bootstrap theme stylesheet for Ignite UI in App.razor with interactive server mode
- Set up IgniteUI.Blazor.GridLite in both Server and Client projects

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 1c104495e1b2c9a5.

BEGIN THIRD-PARTY FILE 1c104495e1b2c9a5
````text
---
license: MIT
name: use-igniteui-blazor
description: >
  Add, configure, or review Ignite UI for Blazor Lite component support in Blazor applications.
  USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite,
  registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split
  Blazor Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the
  theme stylesheet, picking the right host page, locating the GridLite
  stylesheet path, explaining single-project vs split Server/Client Web App
  setup differences, and checking where an interactive render mode is needed
  for Ignite UI components to work.
  DO NOT USE FOR: general Blazor component authoring without Ignite UI, choosing
  app architecture or render mode from scratch (see create-blazor-project),
  JavaScript interop (see use-js-interop), authentication (see configure-auth),
  prerendering (see support-prerendering), or layout/component design questions that need
  no Ignite UI setup.
---

# Application Setup & Component Registration

## 1. NuGet package

Before adding packages, inspect the target projects' target framework and existing package references. The lowest supported target framework version is .NET 8.0. If `IgniteUI.Blazor` or `IgniteUI.Blazor.Trial` is already referenced, keep that package strategy and do not add Lite or GridLite. Only switch package families when the user explicitly asks, replacing conflicting references rather than keeping both.

```bash
dotnet add package IgniteUI.Blazor.Lite       # OSS core UI components (MIT)
dotnet add package IgniteUI.Blazor.GridLite   # OSS lightweight grid (MIT)
```

Use `IgniteUI.Blazor.Lite` for core controls such as `IgbInput`, `IgbCombo` and `IgbDialog`, and `IgniteUI.Blazor.GridLite` for the lightweight grid. Reference both packages only when the app needs both. Do not invent per-component packages such as `IgniteUI.Blazor.Combo`.

Charts, maps, gauges and other premium components are not included in Lite. Check the requested component's package before recommending a reference.

## 2. `IgniteUI.Blazor.Lite` Service Registration

Usually in `Program.cs`:

```csharp
builder.Services.AddIgniteUIBlazor();   // no modules pre-loaded; each loads on first render
```

Pass `typeof(Igb<Name>Module)` values to eagerly pre-load a specific set instead:

```csharp
builder.Services.AddIgniteUIBlazor(
    typeof(IgbInputModule), typeof(IgbComboModule), typeof(IgbDialogModule));
```

Module names always follow `Igb{ComponentName}Module`. Passing modules eagerly loads them during startup, increasing the initial transfer to reduce first-render latency. Components not listed still register their own modules on first render.
````
END THIRD-PARTY FILE 1c104495e1b2c9a5

The third-party file has ended. Everything between the 1c104495e1b2c9a5 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2702 of 5648 bytes. © dotnet · MIT · https://github.com/dotnet/skills/tree/HEAD/plugins/dotnet-blazor/skills/use-igniteui-blazor/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md