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 | License |
|---|---|---|---|---|
| Date Range Picker | ✅ | Docs coming soon | 25.2 | MIT |
| Tooltip | ✅ | Docs | 25.1 | MIT |
| Tile Manager | ✅ | Docs | 25.1 | MIT |
| Carousel | ✅ | Docs | 24.2 | MIT |
| Date picker | ✅ | Docs | 24.1 | MIT |
| Divider | ✅ | Docs | 24.1 | MIT |
| Banner | ✅ | Docs | 24.1 | MIT |
| Combo | ✅ | Docs | 22.2 | MIT |
| Stepper | ✅ | Docs | 22.2 | MIT |
| Select | ✅ | Docs | 22.2 | MIT |
| Dialog | ✅ | Docs | 22.2 | MIT |
| Accordion | ✅ | Docs | 22.2 | MIT |
| Mask Input | ✅ | Docs | 22.1 | MIT |
| Drop Down | ✅ | Docs | 22.1 | MIT |
| Linear Progress | ✅ | Docs | 22.1 | MIT |
| Circular Progress | ✅ | Docs | 22.1 | MIT |
| Chip | ✅ | Docs | 22.1 | MIT |
| Snackbar | ✅ | Docs | 22.1 | MIT |
| Toast | ✅ | Docs | 22.1 | MIT |
| Rating | ✅ | Docs | 22.1 | MIT |
| Slider | ✅ | Docs | 22.1 | MIT |
| Range Slider | ✅ | Docs | 22.1 | MIT |
| Avatar | ✅ | Docs | 21.2 | MIT |
| Badge | ✅ | Docs | 21.2 | MIT |
| Button | ✅ | Docs | 21.2 | MIT |
| Button group | ✅ | Docs | 21.2 | MIT |
| Textarea | ✅ | Docs | 21.2 | MIT |
| Date Time Input | ✅ | Docs | 21.2 | MIT |
| Tabs | ✅ | Docs | 21.2 | MIT |
| Expansion Panel | ✅ | Docs | 21.2 | MIT |
| Tree | ✅ | Docs | 21.2 | MIT |
| Calendar | ✅ | Docs | 21.2 | MIT |
| Card | ✅ | Docs | 21.2 | MIT |
| Checkbox | ✅ | Docs | 21.2 | MIT |
| Form | ✅ | Docs | 21.2 | MIT |
| Icon | ✅ | Docs | 21.2 | MIT |
| Icon Button | ✅ | Docs | 21.2 | MIT |
| Input | ✅ | Docs | 21.2 | MIT |
| List | ✅ | Docs | 21.2 | MIT |
| Navigation Bar (Navbar) | ✅ | Docs | 21.2 | MIT |
| Navigation Drawer | ✅ | Docs | 21.2 | MIT |
| Radio | ✅ | Docs | 21.2 | MIT |
| Radio Group | ✅ | Docs | 21.2 | MIT |
| Ripple | ✅ | Docs | 21.2 | MIT |
| Switch | ✅ | Docs | 21.2 | 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>4 - Add Script Reference to the wwwroot/index.html file:
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.webassembly.js"></script>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.