MudBlazor 8.0.0-preview.6

Prefix Reserved
This is a prerelease version of MudBlazor.
dotnet add package MudBlazor --version 8.0.0-preview.6                
NuGet\Install-Package MudBlazor -Version 8.0.0-preview.6                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="MudBlazor" Version="8.0.0-preview.6" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add MudBlazor --version 8.0.0-preview.6                
#r "nuget: MudBlazor, 8.0.0-preview.6"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install MudBlazor as a Cake Addin
#addin nuget:?package=MudBlazor&version=8.0.0-preview.6&prerelease

// Install MudBlazor as a Cake Tool
#tool nuget:?package=MudBlazor&version=8.0.0-preview.6&prerelease                

<h1> <picture> <source media="(prefers-color-scheme: dark)" srcset="content/MudBlazor-GitHub-NoBg-Dark.png"> <source media="(prefers-color-scheme: light)" srcset="content/MudBlazor-GitHub-NoBg.png"> <img alt="MudBlazor" src="content/MudBlazor-GitHub-NoBg.png"> </picture> </h1>

Material Design components for Blazor

GitHub Workflow Status Codecov Quality Gate Status GitHub GitHub Repo stars GitHub last commit Contributors Discussions Discord Twitter NuGet version NuGet downloads

MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure. It is perfect for .NET developers who want to rapidly build web applications without having to struggle with CSS and Javascript. MudBlazor, being written entirely in C#, empowers you to adapt, fix or extend the framework. There are plenty of examples in the documentation, which makes understanding and learning MudBlazor very easy.

Documentation & Demo

Why is MudBlazor so successful?

  • Clean and aesthetic graphic design based on Material Design.
  • Clear and easy to understand structure.
  • Good documentation with many examples and source snippets.
  • All components are written entirely in C#, no JavaScript allowed (except where absolutely necessary).
  • Users can make beautiful apps without needing CSS (but they can of course use CSS too).
  • No dependencies on other component libraries, 100% control over components and features.
  • Stability! We strive for a complete test coverage.
  • Releases often so developers can get their PRs and fixes in a timely fashion.

Prerequisites

MudBlazor .NET Support
1.x.x - 2.0.x .NET 3.1 Ended 03/2021
5.x.x .NET 5 Ended 01/2022
6.x.x .NET 6, .NET 7, .NET 8 Ended 01/2025
7.x.x .NET 7, .NET 8 ✔️
8.x.x .NET 8, .NET 9 ✔️

* Static rendering is not supported - Learn more.

** We cannot guarantee compatibility with browsers no longer maintained by their publishers. For the best experience, use an up-to-date browser - See Blazor supported platforms.

Stats

Alt

Contributing

👋 Thanks for wanting to contribute!
Contributions from the community are what makes MudBlazor successful.

If you are familiar with technologies like C#, Blazor, JavaScript, or CSS, and wish to give something back, please consider submitting a pull request! We try to merge all non-breaking bugfixes and will deliberate the value of new features for the community. Please note there is no guarantee your PR will be merged, so if you want to be sure before investing the work, feel free to contact the team first.

Check out the contribution guidelines to understand our goals and learn more about the internals of the project.

Getting Started

Full installation instructions can be found on our website.
Alternatively use one of our templates from the MudBlazor.Templates repo.

Quick Installation Guide

Install Package

dotnet add package MudBlazor

Add the following to _Imports.razor

@using MudBlazor

Add the following to the MainLayout.razor or App.razor

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

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 following to the default Blazor script at the end of the body

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

Add the following to the relevant sections of Program.cs

using MudBlazor.Services;
builder.Services.AddMudServices();

Usage

<MudText Typo="Typo.h6">MudBlazor is @Text</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ButtonOnClick">@ButtonText</MudButton>

@code {
  public string Text { get; set; } = "????";
  public string ButtonText { get; set; } = "Click Me";
  public int ButtonClicked { get; set; }

  void ButtonOnClick()
  {
      ButtonClicked += 1;
      Text = $"Awesome x {ButtonClicked}";
      ButtonText = "Click Me Again";
  }
}
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (184)

Showing the top 5 NuGet packages that depend on MudBlazor:

Package Downloads
MudBlazor.ThemeManager

ThemeManager component for MudBlazor to design, test or do live changes to Mudblazor themes.

FenixAlliance.ACL.Dependencies

Application Component for the Alliance Business Suite.

MudBlazor.Markdown

Markdown component for MudBlazor (https://mudblazor.com/)

CodeBeam.MudBlazor.Extensions

MudBlazor extension components from contributors. Includes 30+ components and utilities.

Blauhaus.EVACS.Admin.Blazor

Package Description

GitHub repositories (53)

Showing the top 5 popular GitHub repositories that depend on MudBlazor:

Repository Stars
fullstackhero/dotnet-starter-kit
Production Grade Cloud-Ready .NET 9 Starter Kit (Web API + Blazor Client) with Multitenancy Support, and Clean/Modular Architecture that saves roughly 200+ Development Hours! All Batteries Included.
fullstackhero/blazor-starter-kit
Clean Architecture Template for Blazor WebAssembly Built with MudBlazor Components.
dotnet/samples
Sample code referenced by the .NET documentation
Nethereum/Nethereum
Ethereum .Net cross platform integration library
enkodellc/blazorboilerplate
Blazor Boilerplate / Starter Template with MudBlazor
Version Downloads Last updated
8.0.0-preview.6 836 12/17/2024
8.0.0-preview.5 4,619 11/22/2024
8.0.0-preview.4 6,233 10/30/2024
8.0.0-preview.3 467 10/28/2024
8.0.0-preview.2 696 10/22/2024
8.0.0-preview.1 1,812 10/13/2024
7.15.0 222,548 10/29/2024
7.14.0 59,092 10/22/2024
7.13.0 53,373 10/17/2024
7.12.1 22,853 10/14/2024
7.12.0 3,989 10/14/2024
7.11.0 12,862 10/12/2024
7.10.0 7,806 10/11/2024
7.9.0 15,945 10/10/2024
7.8.0 245,404 9/6/2024
7.7.0 39,259 9/2/2024
7.6.0 223,309 8/6/2024
7.5.0 47,163 7/31/2024
7.4.0 51,264 7/23/2024
7.3.0 57,891 7/17/2024
7.2.0 21,519 7/15/2024
7.1.1 21,193 7/11/2024
7.1.0 7,474 7/10/2024
7.0.0 69,474 6/29/2024
7.0.0-rc.2 3,006 6/21/2024
7.0.0-rc.1 18,782 6/10/2024
7.0.0-preview.4 3,823 5/27/2024
7.0.0-preview.3 3,622 5/14/2024
7.0.0-preview.2 750 5/9/2024
7.0.0-preview.1 2,110 5/1/2024
6.21.0 178,507 7/6/2024
6.20.0 415,518 6/3/2024
6.19.1 765,411 3/22/2024
6.19.0 4,790 3/22/2024
6.18.0 44,212 3/20/2024
6.17.0 191,787 3/4/2024
6.16.0 176,186 2/19/2024
6.15.0 283,985 1/30/2024
6.14.0 101,745 1/22/2024
6.12.0 302,608 1/2/2024
6.11.2 187,496 12/18/2023
6.11.1 322,265 11/21/2023
6.11.0 462,520 10/8/2023
6.10.0 199,064 9/14/2023
6.9.0 215,932 8/18/2023
6.8.0 164,505 8/2/2023
6.7.0 235,267 7/10/2023
6.6.0 83,942 6/29/2023
6.5.0 48,985 6/24/2023
6.4.1 134,052 6/8/2023
6.4.0 8,242 6/7/2023
6.3.1 86,711 5/27/2023
6.3.0 57,044 5/24/2023
6.2.5 62,186 5/17/2023
6.2.3 131,057 5/3/2023
6.2.2 205,750 4/13/2023
6.2.1 39,304 4/12/2023
6.2.1-dev3 2,263 4/4/2023
6.2.1-dev2 1,760 3/30/2023
6.2.0 303,927 3/15/2023
6.1.10-dev1 3,822 3/2/2023
6.1.9 402,727 2/15/2023
6.1.8 185,124 1/27/2023
6.1.7 249,815 1/2/2023
6.1.6 77,288 12/18/2022
6.1.5 69,819 12/11/2022
6.1.4 72,756 12/5/2022
6.1.3-dev.1 2,508 11/22/2022
6.1.2 197,353 11/14/2022
6.1.0 69,231 11/13/2022
6.0.19-dev3 1,652 11/11/2022
6.0.19-dev1 2,465 11/10/2022
6.0.18 51,164 11/9/2022
6.0.17 203,529 10/10/2022
6.0.17-dev.1 3,968 9/22/2022
6.0.16 159,074 9/21/2022
6.0.15 261,240 8/31/2022
6.0.14 312,861 7/28/2022
6.0.13 98,792 7/26/2022
6.0.12 119,572 7/18/2022
6.0.11 252,519 7/1/2022
6.0.11-dev.4 7,453 5/30/2022
6.0.11-dev.3 1,303 5/24/2022
6.0.11-dev.2 489 5/21/2022
6.0.11-dev.1 794 5/20/2022
6.0.10 777,122 5/3/2022
6.0.10-dev.5 898 4/24/2022
6.0.10-dev.4 648 4/21/2022
6.0.10-dev.3 1,970 4/19/2022
6.0.10-dev.2 1,878 4/6/2022
6.0.10-dev.1 337 4/5/2022
6.0.9 232,869 3/29/2022
6.0.8 13,875 3/27/2022
6.0.7 249,155 2/25/2022
6.0.6 431,329 2/3/2022
6.0.5 83,177 1/17/2022
6.0.4 34,742 1/3/2022
6.0.3 3,849 12/31/2021
6.0.2 238,903 11/9/2021
5.2.5 23,892 9/29/2022
5.2.4 59,812 1/7/2022
5.2.0 86,656 10/31/2021
5.1.5 81,626 9/27/2021
5.1.4 58,576 9/13/2021
5.1.3 27,269 9/6/2021
5.1.2 21,282 8/24/2021
5.1.1 10,996 8/20/2021
5.1.0 73,001 7/27/2021
5.0.15 52,433 6/28/2021
5.0.14 41,365 6/21/2021
5.0.13 14,107 6/15/2021
5.0.11 15,729 6/7/2021
5.0.10 20,503 5/24/2021
5.0.9 20,486 5/17/2021
5.0.8 19,871 4/25/2021
5.0.7 29,843 3/29/2021
5.0.6 13,242 3/16/2021
5.0.5 14,059 3/8/2021
5.0.3 9,795 3/1/2021
5.0.2 6,801 2/21/2021
5.0.1 10,087 2/10/2021
5.0.0 7,530 2/6/2021
2.0.7 47,048 3/29/2021
2.0.6 4,030 3/16/2021
2.0.5 2,692 3/8/2021
2.0.4 2,122 3/8/2021
2.0.3 2,121 3/1/2021
2.0.2 2,282 2/21/2021
2.0.0 7,633 2/5/2021
1.2.4 13,890 12/30/2020
1.2.1 3,970 12/17/2020
1.2.0 3,171 12/7/2020
1.1.5 4,236 11/29/2020
1.1.4 2,503 11/23/2020
1.1.3 9,001 11/16/2020
1.1.2 2,069 11/11/2020
1.1.1 2,136 11/5/2020
1.1.0 1,954 11/2/2020
1.0.9 2,110 10/26/2020
1.0.8 1,962 10/23/2020
1.0.7 1,857 10/18/2020
1.0.6 1,829 10/11/2020
1.0.5 1,934 10/8/2020
1.0.4 1,897 10/2/2020
1.0.3 2,023 9/20/2020
1.0.2 1,981 9/20/2020
1.0.1 1,869 9/11/2020
1.0.0 9,918 9/11/2020