base on Blazor Component Library based on Material Design principles with an emphasis on ease of use and extensibility <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  [](https://app.codecov.io/github/MudBlazor/MudBlazor) [](https://sonarcloud.io/summary/overall?id=MudBlazor_MudBlazor) [](https://github.com/mudblazor/MudBlazor/blob/master/LICENSE) [](https://github.com/mudblazor/MudBlazor/stargazers) [](https://github.com/mudblazor/mudblazor) [](https://github.com/mudblazor/mudblazor/graphs/contributors) [](https://github.com/mudblazor/mudblazor/discussions) [](https://discord.gg/mudblazor) [](https://twitter.com/MudBlazor) [](https://www.nuget.org/packages/MudBlazor/) [](https://www.nuget.org/packages/MudBlazor/) 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 & Demo - 🌐 [MudBlazor.com](https://mudblazor.com) – Full documentation - ⚡ [Try.MudBlazor.com](https://try.mudblazor.com/) – Interactive playground ## 💎 Why is MudBlazor so successful? - Aesthetic design that follows Material Design principles. - Intuitive, consistent component structure. - Rich documentation with tons of examples and code snippets. - Fully written in C# with minimal JavaScript. - Build beautiful UIs without CSS (but fully customizable when needed). - No third-party component dependencies – maximum flexibility. - Strive for stability with extensive test coverage. - Frequent releases so devs get their fixes and features fast. ## ⚙️ Prerequisites | MudBlazor | .NET | Support | | :--- | :---: | :---: | | 1.x.x - 2.0.x | .NET 3.1 | Ended 03/2021 | | 5.x.x | .NET 5 | Ended 01/2022 | | 6.x.x | [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0), [.NET 7](https://dotnet.microsoft.com/download/dotnet/7.0), [.NET 8](https://dotnet.microsoft.com/download/dotnet/8.0) | Ended 01/2025 | | 7.x.x | [.NET 7](https://dotnet.microsoft.com/download/dotnet/7.0), [.NET 8](https://dotnet.microsoft.com/download/dotnet/8.0) | Limited | | 8.x.x | [.NET 8](https://dotnet.microsoft.com/download/dotnet/8.0), [.NET 9](https://dotnet.microsoft.com/download/dotnet/9.0) | :heavy_check_mark: | > [!TIP] > Upgrading? Check our [Migration Guide](https://github.com/MudBlazor/MudBlazor/blob/dev/MIGRATION.md) for help with breaking changes. > [!WARNING] > 1. Static rendering is not supported - [Learn more](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes). > 2. Older browsers may not be supported. Use a modern, up-to-date browser - [Blazor supported platforms](https://learn.microsoft.com/aspnet/core/blazor/supported-platforms). ## 📊 Repo Stats  ## 🤝 Contributing Thanks for wanting to contribute! 👋 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](https://discord.gg/mudblazor) first to get feedback before diving in. 📚 Check out our [contribution guidelines](/CONTRIBUTING.md) to get started and learn more about how the project works. ## 🚀 Getting Started We have ready-to-go templates at the [MudBlazor.Templates](https://github.com/mudblazor/Templates) repository, or follow the quick install guide to set things up manually: ### 🛠️ Quick Install Install Package: ``` dotnet add package MudBlazor ``` Add to `_Imports.razor`: ```razor @using MudBlazor ``` Add to the `MainLayout.razor` or `App.razor`: ```razor <MudThemeProvider/> <MudPopoverProvider/> <MudDialogProvider/> <MudSnackbarProvider/> ``` Add to your HTML `head` section: ```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" /> ``` It's either `index.html` or `_Layout.cshtml`/`_Host.cshtml`/`App.razor` depending on whether you're running WebAssembly or Server. Next, add to the default Blazor script at the end of the `body`: ```razor <script src="_content/MudBlazor/MudBlazor.min.js"></script> ``` Add to the relevant sections of `Program.cs`: ```c# using MudBlazor.Services; ``` ```c# builder.Services.AddMudServices(); ``` ### 🔗 Full Setup Guide For more details, see the [complete installation guide](https://mudblazor.com/getting-started/installation) on our website. ### 💻 Example Usage ```razor <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"; } } ``` ", Assign "at most 3 tags" to the expected json: {"id":"603","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"