MudBlazor 7.8.0
Prefix Reserveddotnet add package MudBlazor --version 7.8.0
NuGet\Install-Package MudBlazor -Version 7.8.0
<PackageReference Include="MudBlazor" Version="7.8.0" />
paket add MudBlazor --version 7.8.0
#r "nuget: MudBlazor, 7.8.0"
// Install MudBlazor as a Cake Addin #addin nuget:?package=MudBlazor&version=7.8.0 // Install MudBlazor as a Cake Tool #tool nuget:?package=MudBlazor&version=7.8.0
<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
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 | ✔️ |
7.x.x | .NET 7, .NET 8 | ✔️ |
ℹ️ Currently only interactive rendering modes are supported - Learn more.
⚠️ Blazor only supports current browser versions. To ensure a seamless experience with MudBlazor, please use an up-to-date web browser. If a browser version is no longer maintained by its publisher, we cannot guarantee compatibility with MudBlazor.
Stats
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 index.html
(client-side) or _Host.cshtml
(server-side) in the head
<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 the following to index.html
or _Host.cshtml
in 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 | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. 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. |
-
net7.0
- Microsoft.AspNetCore.Components (>= 7.0.20)
- Microsoft.AspNetCore.Components.Web (>= 7.0.20)
- Microsoft.Extensions.Localization (>= 7.0.20)
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.8)
- Microsoft.AspNetCore.Components.Web (>= 8.0.8)
- Microsoft.Extensions.Localization (>= 8.0.8)
NuGet packages (176)
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/) |
|
Blauhaus.EVACS.Admin.Blazor
Package Description |
|
CodeBeam.MudBlazor.Extensions
MudBlazor extension components from contributors. Includes 30+ components and utilities. |
GitHub repositories (52)
Showing the top 5 popular GitHub repositories that depend on MudBlazor:
Repository | Stars |
---|---|
fullstackhero/dotnet-starter-kit
Production Grade Cloud-Ready .NET 8 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 |
---|---|---|
7.8.0 | 95,303 | 9/6/2024 |
7.7.0 | 23,963 | 9/2/2024 |
7.6.0 | 146,716 | 8/6/2024 |
7.5.0 | 31,483 | 7/31/2024 |
7.4.0 | 36,781 | 7/23/2024 |
7.3.0 | 33,907 | 7/17/2024 |
7.2.0 | 17,852 | 7/15/2024 |
7.1.1 | 16,788 | 7/11/2024 |
7.1.0 | 5,547 | 7/10/2024 |
7.0.0 | 46,207 | 6/29/2024 |
7.0.0-rc.2 | 2,389 | 6/21/2024 |
7.0.0-rc.1 | 17,657 | 6/10/2024 |
7.0.0-preview.4 | 3,555 | 5/27/2024 |
7.0.0-preview.3 | 3,168 | 5/14/2024 |
7.0.0-preview.2 | 727 | 5/9/2024 |
7.0.0-preview.1 | 1,888 | 5/1/2024 |
6.21.0 | 89,382 | 7/6/2024 |
6.20.0 | 296,894 | 6/3/2024 |
6.19.1 | 612,044 | 3/22/2024 |
6.19.0 | 3,311 | 3/22/2024 |
6.18.0 | 37,883 | 3/20/2024 |
6.17.0 | 168,293 | 3/4/2024 |
6.16.0 | 157,673 | 2/19/2024 |
6.15.0 | 256,060 | 1/30/2024 |
6.14.0 | 90,814 | 1/22/2024 |
6.12.0 | 271,646 | 1/2/2024 |
6.11.2 | 170,566 | 12/18/2023 |
6.11.1 | 301,922 | 11/21/2023 |
6.11.0 | 430,163 | 10/8/2023 |
6.10.0 | 191,083 | 9/14/2023 |
6.9.0 | 207,374 | 8/18/2023 |
6.8.0 | 161,643 | 8/2/2023 |
6.7.0 | 228,509 | 7/10/2023 |
6.6.0 | 82,177 | 6/29/2023 |
6.5.0 | 44,458 | 6/24/2023 |
6.4.1 | 130,858 | 6/8/2023 |
6.4.0 | 8,151 | 6/7/2023 |
6.3.1 | 84,015 | 5/27/2023 |
6.3.0 | 56,256 | 5/24/2023 |
6.2.5 | 61,348 | 5/17/2023 |
6.2.3 | 122,258 | 5/3/2023 |
6.2.2 | 198,280 | 4/13/2023 |
6.2.1 | 36,078 | 4/12/2023 |
6.2.1-dev3 | 2,237 | 4/4/2023 |
6.2.1-dev2 | 1,742 | 3/30/2023 |
6.2.0 | 289,733 | 3/15/2023 |
6.1.10-dev1 | 3,801 | 3/2/2023 |
6.1.9 | 390,081 | 2/15/2023 |
6.1.8 | 179,971 | 1/27/2023 |
6.1.7 | 245,915 | 1/2/2023 |
6.1.6 | 76,476 | 12/18/2022 |
6.1.5 | 68,162 | 12/11/2022 |
6.1.4 | 71,701 | 12/5/2022 |
6.1.3-dev.1 | 2,491 | 11/22/2022 |
6.1.2 | 186,858 | 11/14/2022 |
6.1.0 | 68,901 | 11/13/2022 |
6.0.19-dev3 | 1,635 | 11/11/2022 |
6.0.19-dev1 | 2,432 | 11/10/2022 |
6.0.18 | 50,000 | 11/9/2022 |
6.0.17 | 201,764 | 10/10/2022 |
6.0.17-dev.1 | 3,902 | 9/22/2022 |
6.0.16 | 156,721 | 9/21/2022 |
6.0.15 | 255,370 | 8/31/2022 |
6.0.14 | 310,322 | 7/28/2022 |
6.0.13 | 96,093 | 7/26/2022 |
6.0.12 | 117,161 | 7/18/2022 |
6.0.11 | 246,814 | 7/1/2022 |
6.0.11-dev.4 | 7,437 | 5/30/2022 |
6.0.11-dev.3 | 1,279 | 5/24/2022 |
6.0.11-dev.2 | 477 | 5/21/2022 |
6.0.11-dev.1 | 781 | 5/20/2022 |
6.0.10 | 757,864 | 5/3/2022 |
6.0.10-dev.5 | 884 | 4/24/2022 |
6.0.10-dev.4 | 634 | 4/21/2022 |
6.0.10-dev.3 | 1,956 | 4/19/2022 |
6.0.10-dev.2 | 1,861 | 4/6/2022 |
6.0.10-dev.1 | 324 | 4/5/2022 |
6.0.9 | 227,878 | 3/29/2022 |
6.0.8 | 13,764 | 3/27/2022 |
6.0.7 | 237,702 | 2/25/2022 |
6.0.6 | 405,969 | 2/3/2022 |
6.0.5 | 82,618 | 1/17/2022 |
6.0.4 | 34,607 | 1/3/2022 |
6.0.3 | 3,805 | 12/31/2021 |
6.0.2 | 234,967 | 11/9/2021 |
5.2.5 | 22,175 | 9/29/2022 |
5.2.4 | 58,938 | 1/7/2022 |
5.2.0 | 85,401 | 10/31/2021 |
5.1.5 | 80,871 | 9/27/2021 |
5.1.4 | 58,318 | 9/13/2021 |
5.1.3 | 27,125 | 9/6/2021 |
5.1.2 | 21,179 | 8/24/2021 |
5.1.1 | 10,783 | 8/20/2021 |
5.1.0 | 72,223 | 7/27/2021 |
5.0.15 | 51,771 | 6/28/2021 |
5.0.14 | 40,439 | 6/21/2021 |
5.0.13 | 13,992 | 6/15/2021 |
5.0.11 | 15,662 | 6/7/2021 |
5.0.10 | 20,364 | 5/24/2021 |
5.0.9 | 20,429 | 5/17/2021 |
5.0.8 | 19,398 | 4/25/2021 |
5.0.7 | 29,610 | 3/29/2021 |
5.0.6 | 13,175 | 3/16/2021 |
5.0.5 | 14,020 | 3/8/2021 |
5.0.3 | 9,648 | 3/1/2021 |
5.0.2 | 6,641 | 2/21/2021 |
5.0.1 | 9,965 | 2/10/2021 |
5.0.0 | 7,364 | 2/6/2021 |
2.0.7 | 44,685 | 3/29/2021 |
2.0.6 | 3,952 | 3/16/2021 |
2.0.5 | 2,667 | 3/8/2021 |
2.0.4 | 2,095 | 3/8/2021 |
2.0.3 | 2,094 | 3/1/2021 |
2.0.2 | 2,260 | 2/21/2021 |
2.0.0 | 7,598 | 2/5/2021 |
1.2.4 | 13,768 | 12/30/2020 |
1.2.1 | 3,944 | 12/17/2020 |
1.2.0 | 3,146 | 12/7/2020 |
1.1.5 | 4,211 | 11/29/2020 |
1.1.4 | 2,478 | 11/23/2020 |
1.1.3 | 8,869 | 11/16/2020 |
1.1.2 | 2,048 | 11/11/2020 |
1.1.1 | 2,114 | 11/5/2020 |
1.1.0 | 1,932 | 11/2/2020 |
1.0.9 | 2,086 | 10/26/2020 |
1.0.8 | 1,940 | 10/23/2020 |
1.0.7 | 1,834 | 10/18/2020 |
1.0.6 | 1,806 | 10/11/2020 |
1.0.5 | 1,911 | 10/8/2020 |
1.0.4 | 1,876 | 10/2/2020 |
1.0.3 | 2,000 | 9/20/2020 |
1.0.2 | 1,958 | 9/20/2020 |
1.0.1 | 1,845 | 9/11/2020 |
1.0.0 | 7,936 | 9/11/2020 |