Setup MudBlazor in a Blazor Server App .NET 6

Setup MudBlazor in a Blazor Server App .NET 6

Original YouTube Logo

Article have related YouTube video

MudBlazor is an amazing UI tool for Blazor and it is actually quite easy to setup. In this article I will show you how to set it up inside a Blazor Server App.

25-06-2023 |


This article will be with a Blazor Server App that is running with .NET 6.

Install NuGet Package

First of all you need to go and install the NuGet package MudBlazor. Right click your project name in the Solution Explorer and then choose 'Manage NuGet Packages...'

Browse for 'MudBlazor' and install the newest 6th version. So like 6.x.x. This will mean that it is compatible with the .NET 6 framework.


Then you need to insert the CSS, fonts and JS for MudBlazor.

Inside your _Layout.cshtml file in the Pages folder, insert the following code:

And also the JS:


In the Program.cs file we tell our Blazor Server App to actually include MudBlazor to our project. You need to tell that you want to use the MudBlazor Services and add them to the builder like this:


Finally go and add the providers into the MainLayout.razor file in the Shared folder. The top of the page should look like this:

Make sure you add the using of MudBlazor at the top, else the razor file dont know where to find the providers.

Test that it works!

Finally you can go and test if MudBlazor is working by changing any page. In this case I just change the index.razor to use both MudGrid and MudButton.

Like what you see?

New C# Learning Area - Free!

Our website now offers a new section on C# theory, including code examples and related video tutorials.


Subscribe to ZetBits Newsletter