Installation

Getting started with MudBlazor for faster and easier .NET web development.

Online Playground

You can play with MudBlazor online directly in your browser with TryMudBlazor, no installation required.

Play on TryMudBlazor
Using Templates

To get started quickly, you can use our dotnet templates. They're based on the Microsoft Web App template but have been modified to include MudBlazor components.

Open a terminal and install them using this command:

dotnet new install MudBlazor.Templates

Navigate to a folder where you want your project and run the following command to create a new project:

dotnet new mudblazor --interactivity Auto --name MyApplication --all-interactive

You can run dotnet new mudblazor --help to see all available options.

Manual Install

If you already have a project and want to add MudBlazor to it, either from a default template or a working application.

Install Package

Install the library through the NuGet Package Manager or with following command:

dotnet add package MudBlazor
Add Imports

After the package is added, you need to add the following in your _Imports.razor:

@using MudBlazor
Add References

Add the following to your HTML head section, it's either index.html or _Layout.cshtml/_Host.cshtml/App.razor depending on whether you're running WebAssembly or Server.

<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" />

Next, add the MudBlazor js file next to the default Blazor script at the end:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>
Remove References

In the same file as above, the default Blazor template contains Bootstrap. This is no longer needed and can be removed. Delete the Bootstrap and open-iconic folder as well if you decide to get rid of Bootstrap from your project. The site.css file you can either keep or remove, just make sure you clear it out of any content.

Register Services

Add the following in Program.cs:

using MudBlazor.Services;

builder.Services.AddMudServices();

Add Components

Add the following components to your MainLayout.razor:

@* Required *@
<MudThemeProvider />
<MudPopoverProvider />

@* Needed for dialogs *@
<MudDialogProvider />

@* Needed for snackbars *@
<MudSnackbarProvider />

An interactive render mode is necessary for MudBlazor to work as static rendering is not supported at this time. If you experience certain menus not appearing, your render mode may be configured incorrectly. Learn about render modes or view related discussion.

Ready for More?

Now you know how to install MudBlazor, but a common pitfall is to jump straight into different components. We recommend that you read our Layout page to learn about basic project structure and different ways to use our main layout components.

An unhandled error has occurred. Reload 🗙