Ignite UI for Blazor 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. All components are based on the Indigo.Design Design System and are backed by ready-to-use UI kits for Figma.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
This repository hosts the code for Ignite UI for Blazor Lite and is also intended for users to create feature requests, submit issues, and ask questions related to Ignite UI for Blazor.
Components in Ignite UI Blazor Lite
| Components | Status | Documentation | Released Version Ignite UI Blazor |
Released Version Ignite UI Blazor Lite |
License |
|---|---|---|---|---|---|
| Chat | ✅ | Docs | 26.1 | 0.1.0 | MIT |
| Splitter | ✅ | Docs | 26.1 | 0.1.0 | MIT |
| Highlight | ✅ | Docs | 26.1 | 0.1.0 | MIT |
| Date Range Picker | ✅ | Docs | 25.2 | 0.0.1 | MIT |
| Tooltip | ✅ | Docs | 25.1 | 0.0.1 | MIT |
| Tile Manager | ✅ | Docs | 25.1 | 0.0.1 | MIT |
| Carousel | ✅ | Docs | 24.2 | 0.0.1 | MIT |
| Date picker | ✅ | Docs | 24.1 | 0.0.1 | MIT |
| Divider | ✅ | Docs | 24.1 | 0.0.1 | MIT |
| Banner | ✅ | Docs | 24.1 | 0.0.1 | MIT |
| Combo | ✅ | Docs | 22.2 | 0.0.1 | MIT |
| Stepper | ✅ | Docs | 22.2 | 0.0.1 | MIT |
| Select | ✅ | Docs | 22.2 | 0.0.1 | MIT |
| Dialog | ✅ | Docs | 22.2 | 0.0.1 | MIT |
| Accordion | ✅ | Docs | 22.2 | 0.0.1 | MIT |
| Mask Input | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Drop Down | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Linear Progress | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Circular Progress | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Chip | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Snackbar | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Toast | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Rating | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Slider | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Range Slider | ✅ | Docs | 22.1 | 0.0.1 | MIT |
| Avatar | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Badge | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Button | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Button group | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Textarea | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Date Time Input | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Tabs | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Expansion Panel | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Tree | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Calendar | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Card | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Checkbox | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Form | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Icon | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Icon Button | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Input | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| List | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Navigation Bar (Navbar) | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Navigation Drawer | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Radio | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Radio Group | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Ripple | ✅ | Docs | 21.2 | 0.0.1 | MIT |
| Switch | ✅ | Docs | 21.2 | 0.0.1 | MIT |
Grid components in Ignite UI Blazor & Ignite UI Blazor Grid Lite
| Components | Status | Documentation | Released Version | Package | License |
|---|---|---|---|---|---|
| Grid | ✅ | Docs | 22.1 | IgniteUI.Blazor | Commercial |
| Tree Grid | ✅ | Docs | 22.1 | IgniteUI.Blazor | Commercial |
| Pivot Grid | ✅ | Docs | 22.2 | IgniteUI.Blazor | Commercial |
| Hierarchical Grid | ✅ | Docs | 23.2 | IgniteUI.Blazor | Commercial |
| Grid Lite | ✅ | Docs | 0.0.1 | IgniteUI.Blazor.GridLite | MIT |
Provide a complete windowing experience, splitting complex layouts into smaller, easier-to-manage panes.
- Documentation
- License - Commercial
- Package - IgniteUI.Blazor
In order to use the Ignite UI Blazor in your application you should install NuGet packages.
There are three ways to install Ignite UI for Blazor using NuGet:
Using Visual Studio Using the .NET CLI Using the Package Manager
Full documentation for Installing Ignite UI for Blazor
1 - Open the Program.cs file and register the Ignite UI for Blazor Service by calling builder.Services.AddIgniteUIBlazor():
builder.Services.AddIgniteUIBlazor();2 - Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:
@using IgniteUI.Blazor.Controls3 - Add the Style Sheet in the <head> element of the wwwroot/index.html file:
<head>
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>Add an Ignite UI for Blazor component to your razor page:
<IgbCard style="width:350px">
<IgbCardMedia>
<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
</IgbCardMedia>
<IgbCardHeader>
<h4>Jane Doe</h4>
<h6>Professional Photographer</h6>
</IgbCardHeader>
<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
Photography is a way of feeling, of touching,
of loving. What you have caught on film is captured forever...
it remembers little things, long after you have
forgotten everything.</IgbCardContent>
<IgbCardActions>
<IgbButton>More Info</IgbButton>
</IgbCardActions>
</IgbCard>Build and run the Blazor app.
Ignite UI for Blazor components currently require an interactive render mode. The following render modes are supported:
- InteractiveServer
- InteractiveWebAssembly
- InteractiveAuto
Note: Render modes apply only to Blazor Web Apps (.NET 8+). Standalone Blazor WebAssembly and Blazor Server apps are interactive by default.
Static server-side rendering (SSR) is not yet supported because the components rely on JavaScript interop to render and setup the client web components.
Each Ignite UI for Blazor component is a wrapper around its corresponding Ignite UI Web Components custom element (igc-*). As a result, the applicable WAI-ARIA design pattern, the expected keyboard interaction, and all accessibility support (roles, states, properties, focus management), along with the associated tests and accessibility gating, are implemented and maintained in the igniteui-webcomponents repository.
Any accessibility claim, ARIA pattern conformance, keyboard interaction behavior, and related automated testing therefore originate from the igniteui-webcomponents repository rather than from this Blazor wrapper repository. Refer to that repository and the per-component documentation for the specific WAI-ARIA pattern and keyboard interaction supported by each component.
The library is trim-compatible. Applications publishing with PublishTrimmed=true (the Blazor WebAssembly default) should read docs/TRIMMING.md — mainly for preserving the data item types they bind.
Prerequisites: Node.js 22.12 or later (the Vite build requires it).
# 1. Install Node dependencies
npm install
# 2. Build the static web assets (src/wwwroot: JS bundle, initializer, api.js, themes)
npm run buildThe stories/ directory contains a Blazing Story app that demonstrates Ignite UI for Blazor components. To run it locally, the static web assets must be built first.
After the above steps, open the solution in Visual Studio or run the stories project with the .NET CLI:
dotnet run --project stories/IgniteUI.Blazor.Stories.csprojEvery release publishes an SPDX 2.2 SBOM, an SPDX 3.0 SBOM, and a CycloneDX SBOM covering both the NuGet and the npm dependencies the package ships, together with three Sigstore attestations — build provenance, the SPDX SBOM, and the CycloneDX SBOM — each bound to the SHA-256 digest of the signed package that was pushed to NuGet.org. They are attached to the corresponding GitHub release alongside the package and its checksum. To verify a package you downloaded:
gh attestation verify IgniteUI.Blazor.Lite.<version>.nupkg -R IgniteUI/igniteui-blazor
dotnet nuget verify IgniteUI.Blazor.Lite.<version>.nupkgThe two SBOM attestations carry distinct predicate types, so either can be requested on its own:
gh attestation verify IgniteUI.Blazor.Lite.<version>.nupkg -R IgniteUI/igniteui-blazor --predicate-type https://spdx.dev/Document/v2.2
gh attestation verify IgniteUI.Blazor.Lite.<version>.nupkg -R IgniteUI/igniteui-blazor --predicate-type https://cyclonedx.org/bom