MudBlazor/MudBlazorPublic

NotificationsYou must be signed in to change notification settings
Fork1.6k
Star9.9k

Blazor Component Library based on Material Design principles with an emphasis on ease of use and extensibility

License

MIT license

9.9k stars 1.6k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 7,042 Commits
.github		.github
.vscode		.vscode
content		content
src		src
tools		tools
.gitattributes		.gitattributes
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
ROADMAP.md		ROADMAP.md

Repository files navigation

Material Design components for Blazor

Build stunning, interactive web applications with MudBlazor — the open-source Material Design library for Blazor.

🌐Documentation ⚡Interactive Playground

💎 Why Choose MudBlazor?

📖 Comprehensive documentation and examples
🎨 Beautiful Material Design components
💻 Write in C# with minimal JavaScript
✅ Extensive test coverage

📊 Repo Stats

🚀 Getting Started

Use one of ourtemplates, or follow the quick install guide below:

Installation

Install Package:

dotnet add package MudBlazor

Add to_Imports.razor:

@usingMudBlazor

Add toMainLayout.razor orApp.razor:

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

Add to 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 the HTMLbody section:

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

Add toProgram.cs:

usingMudBlazor.Services;

builder.Services.AddMudServices();

Example Usage

<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 thefull installation guide.

🤝 Contributing

Contributions from the community are what make MudBlazor successful.

💬 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 it to ensure your app works as expected.