👁 Image
MudBlazor 8.15.0

Material Design components for Blazor

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

Build stunning, interactive web applications with MudBlazor — the open-source Material Design library for Blazor.

🌐 Documentation ⚡ Interactive Playground

💎 Why Choose MudBlazor?

📖 Comprehensive documentation and examples
🎨 Beautiful Material Design components
💻 Write in C# with minimal JavaScript
✅ Extensive test coverage

📊 Repo Stats

🚀 Getting Started

Use one of our templates, or follow the quick install guide below:

Installation

Install Package:

dotnet add package MudBlazor

Add to _Imports.razor:

@using MudBlazor

Add to MainLayout.razor or App.razor:

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

Add to HTML head section (index.html/_Layout.cshtml/_Host.cshtml/App.razor):

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

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

Add to Program.cs:

using MudBlazor.Services;

builder.Services.AddMudServices();

Example Usage

<MudText Typo="Typo.h6">
 MudBlazor is @Text
</MudText>

<MudButton Variant="Variant.Filled" 
 Color="Color.Primary" 
 OnClick="ButtonOnClick">
 @ButtonText
</MudButton>

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

 void ButtonOnClick()
 {
 ClickCount += 1;
 Text = $"Awesome x {ClickCount}";
 ButtonText = "Click Me Again";
 }
}

For more details, see the full installation guide.

🤝 Contributing

Contributions from the community are what make MudBlazor successful.

💬 Feel free to chat with us on Discord to get feedback before diving in.
📚 Check out our to get started and learn more about how the project works.
🧪 If a PR fixes something you reported, locally test it to ensure your app works as expected.

⚙️ Version Support