Skip to content

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.

License

Notifications You must be signed in to change notification settings

wladysakemi/MudBlazor

 
 

Repository files navigation

MudBlazor

Material Design components for Blazor

GitHub Workflow Status Codecov GitHub GitHub Repo stars GitHub last commit Contributors Discussions Discord Twitter NuGet version NuGet downloads

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

Why is MudBlazor so successful?

  • 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.
  • Releases often so developers can get their PRs and fixes in a timely fashion.

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, .NET 7, .NET 8 ✔️
7.x.x .NET 7, .NET 8 ✔️

ℹ️ Currently only interactive rendering modes are supported - Learn more.

Stats

Alt

Contributing

👋 Thanks for wanting to contribute!
We will try to merge all (non-breaking) bugfix PRs and we will deliberate the value of feature PRs for the community. But be warned that there is no guarantee that new features will be merged. If you want to be sure before investing the work please contact the team about your planned feature PR.

Check out the contribution guidelines to understand our goals and to learn more about the internals of the project.

Getting Started

Quick Installation Guide

Install Package

dotnet add package MudBlazor

Add the following to _Imports.razor

@using MudBlazor

Add the following to the MainLayout.razor or App.razor

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

Add the following to index.html (client-side) or _Host.cshtml (server-side) in the head

<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 the following to index.html or _Host.cshtml in the body

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

Add the following to the relevant sections of Program.cs

using MudBlazor.Services;
builder.Services.AddMudServices();

Usage

<MudText Typo="Typo.h6">MudBlazor is @Text</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ButtonOnClick">@ButtonText</MudButton>

@code {
  public string Text { get; set; } = "????";
  public string ButtonText { get; set; } = "Click Me";
  public int ButtonClicked { get; set; }

  void ButtonOnClick()
  {
      ButtonClicked += 1;
      Text = $"Awesome x {ButtonClicked}";
      ButtonText = "Click Me Again";
  }
}

About

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C# 76.9%
  • HTML 19.8%
  • SCSS 2.5%
  • Other 0.8%