MudBlazor - Blazor Component Library

Online playground

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

Prerequisites

A system that can compile and run the .NET Framework

.NET SDK - We recommend the main version MudBlazor is using, generally its the latest LTS version.

A code editor, we recommend Jet Brains Rider, Visual Studio or VS Code

Using our dotnet templates

To get started quickly, you can use our dotnet templates they are pre-configured with MudBlazor.
Open a terminal and install them with 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. You can run dotnet new mudblazor --help to see all available options.

dotnet new mudblazor --host wasm --name MyApplication

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 the package

Find the package through NuGet Package Manager or install it 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 font and style references

Add the following to your HTML head section, it's either index.html or _Layout.cshtml/_Host.cshtml 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" />

Add script reference

In the same file but located in the end of it add the MudBlazor js file, it should be in the same location as the default blazor script.

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

Removing references

In the same file as above, the default blazor template load's 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 remove or keep but 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 note that the ThemeProvider is essential for MudBlazor but the rest is optional.

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

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.

Layouts

Understand the structure

Wireframes

Copy, paste layouts

Installation