MudBlazor is a Material design system and components (along the likes of MUI for React etc.).

Out of the box we get a really nice set of UI components, theming, CSS etc.

I want to take a Blazor Standalone application and add MudBlazor to it. MudBlazor does offer templates for creating projects, but at the time of writing, for a standalone application you need to make the changes yourself, it’s not difficult, so let’s see what we need to do…

Installation

Note: This section duplicates some of the MudBlazor Installation instructions, but hopefully I’ll add a little more as we go.

Whilst there’s no standalone template (at the time of writing) its still worth installing the templates using

dotnet new install MudBlazor.Templates

Creating your project

• In Visual Studio create yourself a Blazor Standalone application – select whatever options you want, I’ve selected PWA ad left samples as part of my application, but you do not need these for this post and we will be removing the samples pretty quickly, but it’s nice to see something running before we change everything.
• Add the MudBlazor package via NuGet

  dotnet add package MudBlazor
  

• I will also be wanting the theme library, so also add the NuGet package MudBlazor.ThemeManager

  dotnet add package MudBlazor.ThemeManager
  

• In index.html we need to add a couple of links, so after the link to your application’s styles add the following

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

  We also need to add the script for MudBlazor to index.html, so at the end of the body tag add

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

  Finally remove the bootstrap link, i.e. delete this line

  <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
  

• Within Program.cs we now need to add the MudBlazor services, so add the following (I add them just before await builder.Build().RunAsync();)

  builder.Services.AddMudServices();
  builder.Services.AddMudBlazorDialog();
  

  The first one is all you really need but I’m adding the second for use in my specific application.

• To make life simpler, also add the following to the _Imports.razor file

  @using MudBlazor
  

If you run the application now, things look pretty similar to the default Blazor application template, so we need to start using MudBlazor components, but first we can clean out some unused files.

• Delete the Libs folder within the wwwroot, we do not want bootstrap CSS etc.
• If you added samples, now’s the time to delete the wwwroot/sampledata folder
• In the Pages folder of the project, delete Counter.razor and Weather.razor (or keep them an rename as we will create two replacements later)

Using MudBlazor components

The first thing we need to do is make changes to the MainLayout.razor page, I’m just going to paste the whole page that I’m using, you can obviously changes bits to suite, but it’ll show how to set up the main layout using MudBlazor components

@inherits LayoutComponentBase

<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(_ => DrawerToggle())" />
        <MudText Typo="Typo.h5" Class="ml-3">@_title</MudText>
        <MudSpacer />
        <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="mt-16 pa-4">
        @Body
    </MudMainContent>
</MudLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

@code {
    private readonly string _title = "Fretworks";

    private bool _drawerOpen = true;
    private bool _isDarkMode;
    private MudTheme? _theme;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _theme = new()
            {
                PaletteLight = _lightPalette,
                PaletteDark = _darkPalette,
                LayoutProperties = new LayoutProperties()
                {
                    DrawerWidthLeft = "450px",
                // DrawerWidthRight = "300px"
                }
            };
    }


    private void DrawerToggle() => _drawerOpen = !_drawerOpen;
    private void DarkModeToggle() => _isDarkMode = !_isDarkMode;

    private readonly PaletteLight _lightPalette = new()
        {
            AppbarText = "#ffffff",
            AppbarBackground = "#0C1436",
            Black = "rgba(39,44,52,1)", //"#110e2d",
            DrawerBackground = "#ffffff",
            GrayLight = "#e8e8e8",
            GrayLighter = "#f9f9f9",
            TextPrimary = "#000000",
            TextSecondary = "#92929f",
            DrawerText = "#000000",
            Primary = "#0C1436"
        };

    private readonly PaletteDark _darkPalette = new()
        {
            AppbarText = "#ffffff",
            AppbarBackground = "rgba(26,26,39,0.8)",
            Primary = "rgba(173,173,177,1)",
            Surface = "#1e1e2d",
            Background = "#1a1a27",
            BackgroundGray = "#151521",
            DrawerBackground = "#1a1a27",
            ActionDefault = "#74718e",
            ActionDisabled = "#9999994d",
            ActionDisabledBackground = "#605f6d4d",
            TextPrimary = "#ffffff",
            TextSecondary = "#92929f",
            TextDisabled = "#ffffff33",
            DrawerIcon = "#92929f",
            DrawerText = "#ffffff",
            GrayLight = "#2a2833",
            GrayLighter = "#1e1e2d",
            Info = "#4a86ff",
            Success = "#3dcb6c",
            Warning = "#ffb545",
            Error = "#ff3f5f",
            LinesDefault = "#33323e",
            TableLines = "#33323e",
            Divider = "#292838",
            OverlayLight = "#1e1e2d80",
        };

    public string DarkLightModeButtonIcon => _isDarkMode switch
    {
        true => Icons.Material.Rounded.AutoMode,
        false => Icons.Material.Outlined.DarkMode,
    };
}

In the above we’re also setting up the dark and light theme palettes, obviously I would suggest moving this code into your own theme handling classes etc.

Before things will start to look any good we also need to change the NavMenu.razor, this is a really bare implementation (ready for us to add our own navigation options to)

<MudNavMenu>
</MudNavMenu>

@code {
}

We would add <MudNavLink> elements to the <MudNavMenu> to build up a list of navigation items in the left hand pane of the application.

At this point your application is pretty minimal from a content point of view, but we’ve got dark/light themes and you can switch between them at the click of a button, we’ve got responsive design, i.e. reduce the width of the application and the application switch the UI to work better on mobile/smaller screens. So actually whilst minimal in content it’s actually a pretty good starting point in terms of basic features. We can also click the “hamburger” menu in either small or larger screen layout and we get either a full page experience on larger window sizes and on smaller the menu will list the navigation options when we add them.

Finishing off the basics

We’ll also want to change the following

• wwwroot/favicon.png
• wwwroot/icon-192.png
• wwwroot/icon-512.png

to our application icons.

Navigation and Pages

Let’s complete this post by now adding back a couple of navigation links and pages, just to have something more interesting than a home page and no links.

Within the MudNavMenu in NavMenu.razor add the following

<MudNavLink href="/">Home</MudNavLink>
<MudNavLink href="Select">Select Instrument</MudNavLink>
<MudNavLink href="Settings">Settings</MudNavLink>

Add two more pages to the Pages folder (if you deleted Home.razor then add a new Home.razor page). Name the pages Select.razor and Settings.razor to match our navigation link names and here’s the three pages

Home.razor should look something like this

@page "/"

<PageTitle>Home</PageTitle>

<h1>Fretworks</h1>

Welcome to Fretworks, tools for fretted instrument builders.

Select.razor something like this

@page "/Select"

<PageTitle>Select Instrument</PageTitle>

<h1>Select Instrument Page</h1>

and finally Settings.razor looks something like this

@page "/Settings"

<PageTitle>Settings</PageTitle>

<h1>Settings Page</h1>

Yes I know they’re not very interesting to look at, I’ll leave it to the reader to implement.

Now if the run the application again, you’ve be able to switch between pages, and see the responsive design and hamburger menu in all it’s glory.