MudBlazor 8.10.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 library for Blazor. Accelerate your web application development and build intuitive user interfaces, leveraging the full power of C# to adapt and extend this open-source framework.

🌐 Documentation ⚡ Interactive Playground

💎 Why Choose MudBlazor?

🎨 Beautiful Material Design components.
💻 Fully written in C# with minimal JavaScript.
📖 Rich documentation with extensive examples.
📦 No third-party dependencies for maximum flexibility.
✅ Extensive test coverage for stability.

📊 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

Add to _Imports.razor:

@using MudBlazor

Add to MainLayout.razor or App.razor:

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

Add to your 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 body:

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

Add to the relevant sections of 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.

If you're comfortable with C#, Blazor, JavaScript, or CSS, we'd love your help!
Whether it's fixing bugs, adding features, or improving documentation, every contribution counts.

We aim to review and merge non-breaking pull requests quickly.
For larger features or changes, 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