Blazor is the best solution to create web applications for .NET developers. Since we don’t have to write JavaScript code to design our logic in the frontend side, so we can use our knowledge in .NET and C#.
Let’s see a figure with the Blazor evolution,
![]()
Blazor started with some limitations, but now we have a mature framework that includes all the features needed to start a project from scratch.
Even Blazor is a powerful tool, we can also include other libraries or utilities to potentialize and design rich user interfaces in our components. For example, we need component for showing notifications, modals, forms, rating and datatables. MudBlazor is an amazing library for creating web applications using Blazor with a rich UI.
MudBlazor library contains elements and resources in the following categories,
- Themes, Colors, Typography
- Layout
- Buttons
- Inputs
- Data Display
- Navigation
- Feedback
- Utilities
You can try MudBlazor in the browser before starting locally with a Blazor project using TryMudBlazor.
You can navigate to https://try.mudblazor.com/ and then click on Play Now to open an editor:
![]()
You only need to edit the code and use the play button to execute the code and see a preview in the right panel.
Now Let’s start with MudBlazor step by step with a real project:
1. You need to create a Blazor WebAssembly using the following command:
dotnet new blazorwasm
Note: You can skip this step if you already have a project:
2. Add the package for MudBlazor with the following command:
dotnet add package MudBlazor
3. Add the library in _Imports.razor file. Add this line: @using MudBlazor
4. Add font and style references in the index.html file:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
5. Add the JavaScript reference in the index.html file:
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
6. Add the service in the Program.cs class:
using MudBlazor.Services;
builder.Services.AddMudServices();
7. In MainLayout.razor add the following components:
<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
8. You can navigate to Counter.razor to add a new button with MudBlazor and compare the original one:
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="IncrementCount">Click Me</MudButton>
![]()
Now you can design all the components in your Blazor App using MudBlazor. If you want to read more about controls and utilities in MudBlazor you can navigate to Explore MudBlazor - MudBlazor
If you want to learn more about Blazor and MudBlazor check this MVP Show on YouTube:
Building Web Apps with Blazor+MudBlazor - MVP Show ft. Miguel Teheran - YouTube