Repository files navigation

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

🎨 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.

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

Install Package:

dotnet add package MudBlazor

Add to_Imports.razor:

@usingMudBlazor

Add toMainLayout.razor orApp.razor:

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

Add to your HTMLhead section (index.html/_Layout.cshtml/_Host.cshtml/App.razor):

<linkhref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"rel="stylesheet" /><linkhref="_content/MudBlazor/MudBlazor.min.css"rel="stylesheet" />

Add to the default Blazor script at the end of thebody:

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

Add to the relevant sections ofProgram.cs:

usingMudBlazor.Services;

builder.Services.AddMudServices();

<MudTextTypo="Typo.h6">    MudBlazor is@Text</MudText><MudButtonVariant="Variant.Filled"Color="Color.Primary"OnClick="ButtonOnClick">@ButtonText</MudButton>@code{stringText{get;set;}="????";stringButtonText{get;set;}="Click Me";intClickCount{get;set;}voidButtonOnClick(){ClickCount+=1;Text=$"Awesome x {ClickCount}";ButtonText="Click Me Again";}}

For more details, see thecomplete installation guide on our website.

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 uson Discord to get feedback before diving in.

📚 Check out ourcontribution 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.