Ignite UI for Blazor Lite is a library of UI components, giving you the ability to build modern web applications.
Get Started
$ dotnet add package IgniteUI.Blazor.LiteReadme
Ignite UI for Blazor - from Infragistics
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.
Browser Support
 |  |  |  |  |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Purpose
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.
Overview
| Components | Status | Documentation |
|---|---|---|
| Accordion | :white_check_mark: | Docs |
| Avatar | :white_check_mark: | Docs |
| Badge | :white_check_mark: | Docs |
| Banner | :white_check_mark: | Docs |
| Button Group | :white_check_mark: | Docs |
| Button | :white_check_mark: | Docs |
| Bullet Graph | :white_check_mark: | Docs |
| Calendar | :white_check_mark: | Docs |
| Card | :white_check_mark: | Docs |
| Carousel | :white_check_mark: | Docs |
| Checkbox | :white_check_mark: | Docs |
| Chip | :white_check_mark: | Docs |
| Circular Progress | :white_check_mark: | Docs |
| Combo | :white_check_mark: | Docs |
| Date Picker | :white_check_mark: | Docs |
| Date Time Input | :white_check_mark: | Docs |
| Dialog | :white_check_mark: | Docs |
| Drop Down | :white_check_mark: | Docs |
| Expansion Panel | :white_check_mark: | Docs |
| Form | :white_check_mark: | Docs |
| Icon Button | :white_check_mark: | Docs |
| Icon | :white_check_mark: | Docs |
| Input | :white_check_mark: | Docs |
| Linear Gauge | :white_check_mark: | Docs |
| Linear Progress | :white_check_mark: | Docs |
| List | :white_check_mark: | Docs |
| Mask Input | :white_check_mark: | Docs |
| Navigation Bar (Navbar) | :white_check_mark: | Docs |
| Navigation Drawer | :white_check_mark: | Docs |
| Radial Gauge | :white_check_mark: | Docs |
| Radio | :white_check_mark: | Docs |
| Radio Group | :white_check_mark: | Docs |
| Rating | :white_check_mark: | Docs |
| Ripple | :white_check_mark: | Docs |
| Select | :white_check_mark: | Docs |
| Slider & Range Slider | :white_check_mark: | Docs |
| Snackbar | :white_check_mark: | Docs |
| Stepper | :white_check_mark: | Docs |
| Switch | :white_check_mark: | Docs |
| Tabs | :white_check_mark: | Docs |
| Text Area | :white_check_mark: | Docs |
| Toast | :white_check_mark: | Docs |
| Tree | :white_check_mark: | Docs |
Grid components
| Components | Status | Documentation |
|---|---|---|
| Data Grid | :white_check_mark: | Docs |
| Pivot Grid | :white_check_mark: | Docs |
| Tree Grid | :white_check_mark: | Docs |
| Hierarchical Grid | :white_check_mark: | Docs |
Dock Manager - EXCLUSIVE FEATURE
Provide a complete multi-window experience, splitting complex layouts into smaller, easier-to-manage, and modify panes.
Usage
Ignite UI for Blazor Server App
Ignite UI for Blazor WebAssembly
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
Register 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.Controls
3 - 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 Ignite UI for Blazor Component
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.