igniteui-blazor-components

# Ignite UI for Blazor - UI Components ## How to use this skill 1. Map the request to rows in the routing table below and read **every** matching reference file (in one parallel batch). A request often spans several — a form inside a dialog needs `form-controls.md` **and** `feedback.md`. 2. If the `igniteui-cli` MCP server is available, call `get_doc(framework: "blazor", name: "<slug>")` for each component involved, and `search_api` / `get_api_reference` for exact property, event, and method signatures. MCP output wins over this skill on any conflict. 3. Write code from what you read. The reference files carry verified Blazor APIs — do not substitute Angular, React, or Web Components syntax from memory, and say so plainly when something is not covered rather than guessing. **Without the MCP server this skill still works** — the reference files are self-contained. Do not configure MCP unprompted; if the user wants it, see [MCP server (optional)](#mcp-server-optional). ### Routing table | Task | Read | |---|---| | NuGet install, `Program.cs`, `_Imports.razor`, theme CSS + script tags, project types (Server / WASM / Web App / MAUI), render modes | [`references/setup.md`](./references/setup.md) | | Input, Textarea, Combo, Select, Date Picker, Date Range Picker, Calendar, Date Time Input, Mask Input, Checkbox, Radio, Switch, Slider, Range Slider, Rating, Color Picker, value binding | [`references/form-controls.md`](./references/form-controls.md) | | Tabs, Stepper, Accordion, Expansion Panel, Nav Drawer, Navbar, Tree, Splitter, Divider | [`references/layout.md`](./references/layout.md) | | List, Card, Carousel, Avatar, Badge, Chip, Icon, Icon Button, Button, Button Group, Circular/Linear Progress, Dropdown, Tooltip, QR Code, Ripple, Chat, Highlight | [`references/data-display.md`](./references/data-display.md) | | Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) | | Dock Manager, Tile Manager | [`references/layout-manager.md`](./references/layout-manager.md) | | Category / Data / Financial / Pie / Donut charts, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile, chart features | [`references/charts.md`](./references/charts.md) | | `*Script` parameters: client-side templates, JS event handlers, `registerScript`, `api.js` | [`references/client-scripts.md`](./references/client-scripts.md) | ## Packages | Package | Source | Contains | |---|---|---| | `IgniteUI.Blazor.Lite` | NuGet.org, MIT | Core UI components: forms, layout, navigation, data display, feedback, Tile Manager, Theme Provider | | `IgniteUI.Blazor.GridLite` | NuGet.org, MIT | `IgbGridLite` only | | `IgniteUI.Blazor` | Infragistics licensed feed | Full suite: everything above plus charts, maps, gauges, Dock Manager, enterprise grids | | `IgniteUI.Blazor.Trial` | NuGet.org | Same as `IgniteUI.Blazor`, watermarked | All four use the `IgniteUI.Blazor.Controls` namespace and serve static assets from `_content/IgniteUI.Blazor/` (except `IgniteUI.Blazor.GridLite`, which uses `_content/IgniteUI.Blazor.GridLite/`). **Do not mix `IgniteUI.Blazor` with `IgniteUI.Blazor.Lite`** — duplicate types in the same namespace. If the project already references the full package, do not add Lite/GridLite unless the user asks to switch strategy. ## Rules that apply to every component - **Registration.** `builder.Services.AddIgniteUIBlazor()` in `Program.cs` is required. Passing `typeof(Igb<Name>Module)` arguments eagerly pre-loads exactly those modules; with no arguments every module is available. Components request their own module on first render, so the explicit list is a bundle-size optimization — except for the full product's feature modules that add behavior to a component instead of defining one (`IgbDataChartInteractivityModule`, `IgbDataChartAnnotationModule`, the `*FullModule` bundles): nothing requests those on render, so they must be listed. - **Runtime script.** `IgniteUI.Blazor.Lite` loads its component bundle itself (JS initializer, every hosting model). The full `IgniteUI.Blazor`/`IgniteUI.Blazor.Trial` needs `<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>` before the Blazor framework script in **Blazor Web Apps** so the library's client resources initialize correctly. Never wrap it in `@Assets[...]` (fingerprinting it renders the app blank). - **Theme CSS.** Exactly one theme stylesheet, e.g. `_content/IgniteUI.Blazor/themes/light/bootstrap.css`. - **Slots.** Composition uses named slots (`slot="start"`, `slot="title"`, `slot="footer"`, …), not wrapper components. Use `IgbIcon` inside slots — a font-icon `<span>` is `display: inline` and drifts to the top of the slot's flex box. - **`@ref`.** Declare a field of the component type and use `@ref` for programmatic calls (`await dialog.ShowAsync()`). The reference is `null` until after first render. Some components need `await component.EnsureReady()` before their async methods in `OnAfterRenderAsync(firstRender)` — icon registration especially. - **Parameters are PascalCase** (`ChartType`, `DataSource`), never Angular-style `[chartType]`. - **`Name` is not an HTML name attribute.** On every Ignite UI component `Name` is the framework's element identity used for lookups. Do not use it to group radios or to name a form field. - **Forms.** There is no universal form-integration pattern; several components (`IgbCombo`, `IgbRadio`) do not participate in a plain HTML `<form>`. Bind explicitly with `@bind-Value` / `@bind-Checked` and check the component's doc before assuming form behavior. - **`*Script` parameters** take the *name* of a JavaScript function registered through `_content/IgniteUI.Blazor/api.js` (Lite) or the `igRegisterScript` window global (full product), not code. Use them for client-side templates (rendered per item in the browser, no server round trip). For events prefer the C# event; the script variant is for synchronous cancellation or purely client-side reactions. See [`client-scripts.md`](./references/client-scripts.md). - **Dynamic `class` values** must be a single C# expression (`class="@ChipClass(item)"`). Mixing literal text with `@(...)` in one attribute raises **RZ9986**. ## MCP server (optional) `igniteui-cli` provides `list_components`, `get_doc`, `search_docs`, `search_api`, `get_api_reference`, all taking `framework: "blazor"`. To enable it, add to `.vscode/mcp.json` (VS Code, key `servers`): ```json { "servers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } } ``` Or `.cursor/mcp.json` / `claude_desktop_config.json` (key `mcpServers`): ```json { "mcpServers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } } ``` Reload the editor afterwards. JetBrains: **Settings → Tools → AI Assistant → MCP Servers**, command `npx`, arguments `igniteui-cli mcp`. ## Related skills - [`igniteui-blazor-grids`](../igniteui-blazor-grids/SKILL.md) — Grid, Tree Grid, Hierarchical Grid, Pivot Grid, Grid Lite - [`igniteui-blazor-theming`](../igniteui-blazor-theming/SKILL.md) — themes, palettes, design tokens, CSS parts