👁 Image
MudBlazor 9.5.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

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 ⚡ Interactive Playground

💎 Why Choose MudBlazor?

• 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.
• Releasing often so developers can get their PRs and fixes in a timely fashion.

📊 Repo Stats

🚀 Getting Started

See the installation guide to get started.

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";
 }
}

🤝 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