Material Design components for Blazor

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

🌐 Documentation ⚡ Interactive Playground

💎 Why Choose MudBlazor?

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

📊 Repo Stats

🚀 Getting Started

We have ready-to-go templates at the Templates repository, or follow the quick install guide below:

Installation

Install Package:

dotnet add package MudBlazor

_Imports.razor:

@using MudBlazor

MainLayout.razor or App.razor:

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

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

The default Blazor script at the end of the body:

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

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 complete installation guide on our website.

🤝 Contributing

Contributions from the community are what makes MudBlazor successful.
Whether it's fixing bugs, adding features, or improving documentation, everything counts.

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

⚙️ Version Support