Material Design components for Blazor

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 contribution guidelines 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

[!NOTE]

1. Upgrading? Check our Migration Guide for help with breaking changes.
2. Static rendering is not supported. Learn more
3. Use an up-to-date browser. Blazor supported platforms