Setup MudBlazor in a Blazor Server App .NET 6

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.

_Layout.cshtml

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:

Program.cs

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:

MainLayout.razor

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.