Blazor has been growing in popularity recently. More and more developers are thinking about using this technology in commercial projects. Microsoft is constantly developing this framework and trying to encourage software architects to use it. The next step in this direction is MudBlazor – a Blazor component library. In this post, I will show how this library can be used and what possibilities it gives us.
As I have mentioned, MudBlazor is a Blazor component library that supplies about 70 components. All components and features are accessed within the library so you do not need to add any dependencies. The logic that is behind those components is written in 99,9% in C#, so as a .NET developer, you can easily adapt it to your needs or just debug. Additionally, this library has full control over the CSS, so knowledge about CSS is not required to create well-designed web apps – of course, if you use MudBlazor. 😉
MudBlazor offers many components such as:
- Input Components: TextField, Switch, RadioButton etc.
Each of those components is fully generic, so you can use all types and their nullable versions.
- DatePicker, TimePicker
Support for client and server-side data. Additionally, it provides sorting, filtering or pagination.
- Message Boxes
- And many others 😉
It is worth mentioning that the creators of MudBlazor provide playing with this library and Blazor in the browser. Thanks to that, you can check out if it can be useful for you without creating a new project and opening Visual Studio or Rider. TryMudBlazor can also be valuable when you want to quickly test something or help your colleague. This website is fully integrated with the technical doc of the library and automatically creates links for every code example. The whole solution is based on Blazor REPL.
Let’s try using MudBlazor. First of all, you need to install that using any command-line interpreter:
dotnet new --install MudBlazor.Templates
Then you can open your IDE and create a new project. After putting ‘mudblazor’ in the searchbox, you should see something like that:
Another way to use MudBlazor is by installing it through NuGet Package Manager or with following command:
dotnet add package MudBlazor
The created project should have the following structure:
After running this project, you will see an example app that is powered by MudBlazor:
Manual configuration of MudBlazor basically boils down to the following steps:
- Adding imports in _Imports.razor:
- Adding CSS & Font references to index.html:
<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" />
- Deleting everything in site.css and removing the bootstrap.min.css completely from index.html.
- Adding the following to the body section of index.html:
- Registering services by adding the following to the Main method of Program.cs:
- Add ThemeProvider to App.razor that is a crucial part of MudBlazor:
MudBlazor is one of Blazor component libraries. There are others such as Radzen or Syncfusion etc. but currently, MudBlazor is of the greatest interest. Probably because it has the best documentation and its performance is the fastest. You can find a nice comparison of these libraries here.