# MudBlazor — Material Design Component Library for Blazor

> Build modern .NET web applications with a rich set of Material Design components for Blazor Server and WebAssembly.

## Install

Save in your project root:

# MudBlazor — Material Design Component Library for Blazor

## Quick Use
```bash
dotnet new blazorserver -o MyApp
cd MyApp
dotnet add package MudBlazor
# Add MudBlazor services in Program.cs, then use <MudButton> in your .razor files
```

## Introduction
MudBlazor provides a comprehensive set of Material Design components for the Blazor framework. It lets .NET developers build interactive web UIs entirely in C# without writing JavaScript, while following Google's Material Design guidelines out of the box.

## What MudBlazor Does
- Ships 60+ ready-to-use UI components (tables, forms, dialogs, charts, navigation)
- Supports both Blazor Server and Blazor WebAssembly hosting models
- Provides built-in form validation with a fluent API
- Includes a dark/light theming engine with custom palette support
- Delivers responsive layouts with grid, breakpoints, and utility classes

## Architecture Overview
MudBlazor is a Razor class library distributed as a NuGet package. Components render as standard HTML/CSS without JavaScript interop for most interactions. Where browser APIs are required (scroll, resize, clipboard), a minimal JS layer handles the bridge. The library uses CSS custom properties for theming and ships its own icon set alongside Material Icons.

## Self-Hosting & Configuration
- Install via `dotnet add package MudBlazor` and register services with `builder.Services.AddMudServices()`
- Add the MudBlazor CSS and JS references to your host page
- Wrap your root layout in `<MudThemeProvider>`, `<MudPopoverProvider>`, and `<MudDialogProvider>`
- Customize colors, typography, and shape rounding through the `MudTheme` object
- Works with .NET 6, 7, and 8 Blazor applications

## Key Features
- Material Design 2 and partial Material Design 3 support
- Data grid with sorting, filtering, pagination, and virtualization
- Built-in date/time pickers, color pickers, and file upload components
- Accessibility support with ARIA attributes on interactive elements
- Active community with frequent releases and extensive documentation

## Comparison with Similar Tools
- **Radzen Blazor** — also free and open-source, offers a visual designer but fewer Material-styled components
- **Ant Design Blazor** — follows Ant Design language instead of Material Design
- **Syncfusion Blazor** — commercial suite with more components, requires a license for most use
- **Blazorise** — provider-agnostic, supports Bootstrap, Bulma, and Material via adapters

## FAQ
**Q:** Does MudBlazor require a paid license?
A: No. MudBlazor is MIT-licensed and free for commercial use.

**Q:** Can I use it with Blazor WebAssembly?
A: Yes. It works identically on Blazor Server and WebAssembly.

**Q:** Does it depend on JavaScript frameworks like React or Angular?
A: No. MudBlazor is pure C#/Razor with minimal JS interop only where browser APIs demand it.

**Q:** How large is the CSS/JS bundle?
A: The combined payload is under 300 KB gzipped, suitable for production SPAs.

## Sources
- https://github.com/MudBlazor/MudBlazor
- https://mudblazor.com/

---
Source: https://tokrepo.com/en/workflows/asset-6e0a619a
Author: AI Open Source