Material Design components for Blazor

<img src="https://sonarcloud.io/api/project_badges/measure?project=MudBlazor_MudBlazor&metric=alert_status" alt="Quality Gate Status" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/codecov/c/github/MudBlazor/MudBlazor" alt="Codecov" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/github/license/mudblazor/mudblazor?color=594ae2&logo=github&style=flat-square" alt="GitHub" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/github/stars/mudblazor/mudblazor?color=594ae2&style=flat-square&logo=github" alt="GitHub Repo stars" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/github/contributors/mudblazor/mudblazor?color=594ae2&style=flat-square&logo=github" alt="Contributors" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/github/discussions/mudblazor/mudblazor?color=594ae2&logo=github&style=flat-square" alt="Discussions" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/discord/786656789310865418?color=%237289da&label=Discord&logo=discord&logoColor=%237289da&style=flat-square" alt="Discord" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/twitter/follow/MudBlazor?color=1DA1F2&label=Twitter&logo=Twitter&style=flat-square" alt="Twitter" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/nuget/v/MudBlazor?color=ff4081&label=nuget%20version&logo=nuget&style=flat-square" alt="NuGet version" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/nuget/dt/MudBlazor?color=ff4081&label=nuget%20downloads&logo=nuget&style=flat-square" alt="NuGet downloads" class="ra0-md-img" loading="lazy" />

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 ⚡ Interactive Playground*

💎 Why Choose MudBlazor?

• Clean and aesthetic graphic design based on Material Design.
• Clear and easy to understand structure.
• Good documentation with many examples and source snippets.
• All components are written entirely in C#, no JavaScript allowed (except where absolutely necessary).
• Users can make beautiful apps without needing CSS (but they can of course use CSS too).
• No dependencies on other component libraries, 100% control over components and features.
• Stability! We strive for a complete test coverage.
• Releasing often so developers can get their PRs and fixes in a timely fashion.

📊 Repo Stats

🚀 Getting Started

See the installation guide to get started.

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";
    }
}

🤝 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
> 4. Want to test the latest features? Learn about our nightly builds!