MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Installation

Getting started with MudBlazor for faster and easier web development.

Manual Install

1. Install the package

Find the package through NuGet Package Manager or install it with following command.

dotnet add package MudBlazor

2. Add Imports

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

@using MudBlazor

3. Add CSS & Font references

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

Note: If you're installing on a fresh Blazor template make sure to remove everything in your site.css and remove the bootstrap.min.css completely from either index.html or _Host.cshtml.

In the HTML body section of either index.html or _Host.cshtml add this:

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

4. Register Services

For Blazor WebAssembly add the following to your Program.Main

using MudBlazor.Services;

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");

    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    builder.Services.AddMudServices();

    await builder.Build().RunAsync();
}

For Blazor Server add the following in your Startup.cs under ConfigureServices

using MudBlazor.Services;

public void ConfigureServices(IServiceCollection services)
{
    services.AddMudServices();
}

5. Add Components

Add the following components to your MainLayout.razor or App.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


An error has occurred. This application may no longer respond until reloaded. Reload 🗙