MudBlazor - Enterprise Blazor UI Development
Overview
MudBlazor is a comprehensive Material Design component library for Blazor that provides production-ready UI components for building enterprise web applications. It emphasizes customizable theming, extensive component options, and developer-friendly APIs.
Key Capabilities
| Category |
Components |
| Forms |
TextField, NumericField, Select, Autocomplete, DatePicker, CheckBox, Switch, RadioGroup |
| Data Display |
DataGrid, Table, Card, List, TreeView, Tabs |
| Feedback |
Dialog, Snackbar, Alert, Progress indicators |
| Navigation |
NavMenu, Breadcrumbs, Tabs, Links |
| Layout |
Grid, Container, Paper, Stack, Drawer, AppBar |
When to Use This Skill
Use this skill when:
- Building forms with validation and user feedback
- Creating data tables and grids with sorting, filtering, and paging
- Implementing dialog-based workflows
- Setting up application layouts and navigation
- Theming and styling Blazor applications
- Integrating MudBlazor with Neatoo domain objects
Quick Start
Installation
dotnet add package MudBlazor
Required Configuration
Program.cs:
using MudBlazor.Services;
builder.Services.AddMudServices();
_Imports.razor:
@using MudBlazor
MainLayout.razor - Required Providers:
<MudThemeProvider />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
@Body
</MudLayout>
App.razor or index.html - Required Assets:
<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" />
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
Critical Rules
MudForm vs EditForm
| Scenario |
Use |
| MudBlazor's validation system |
MudForm with OnClick handlers |
| ASP.NET Core validation |
EditForm with ButtonType.Submit |
WARNING: NEVER use ButtonType="ButtonType.Submit" with MudForm.
Four Required Providers
All four providers must be in MainLayout for MudBlazor to function:
| Provider |
Purpose |
MudThemeProvider |
Theme and styling |
MudPopoverProvider |
Popover positioning |
MudDialogProvider |
Dialog service |
MudSnackbarProvider |
Snackbar notifications |
Complex Object Selection
WARNING: When using MudSelect or MudDataGrid with complex objects, you MUST implement IEquatable<T> or provide a Comparer. Selection will not work correctly otherwise.
Dialog Result Handling
WARNING: Always check if dialog was canceled before accessing result data. Accessing result.Data on a canceled dialog will throw.
See Best Practices for code examples.
Additional Resources
For detailed guidance, see:
- Core Concepts - Variants, spacing utilities, color system
- Installation & Setup - Full setup guide, providers, assets
- Form Components - TextField, Select, DatePicker, validation
- Data Display - DataGrid, Table, Cards
- Feedback Components - Dialog, Snackbar, Alert
- Layout System - Grid, Container, responsive patterns
- Navigation - NavMenu, Tabs, Breadcrumbs
- Theming - Custom themes, dark mode, CSS variables
- Neatoo Integration - MudNeatoo components for domain objects
- Best Practices - Patterns, anti-patterns, performance
Official Documentation
1---2name: mudblazor3description: Build enterprise Blazor applications with MudBlazor component library. Use when creating forms, data grids, dialogs, navigation, theming, layout systems, or integrating with Neatoo domain objects. Covers installation, components, validation, data display, and enterprise patterns.4---5
6# MudBlazor - Enterprise Blazor UI Development
7
8## Overview
9
10MudBlazor is a comprehensive Material Design component library for Blazor that provides production-ready UI components for building enterprise web applications. It emphasizes customizable theming, extensive component options, and developer-friendly APIs.
11
12### Key Capabilities
13
14| Category | Components |
15|----------|------------|
16| **Forms** | TextField, NumericField, Select, Autocomplete, DatePicker, CheckBox, Switch, RadioGroup |
17| **Data Display** | DataGrid, Table, Card, List, TreeView, Tabs |
18| **Feedback** | Dialog, Snackbar, Alert, Progress indicators |
19| **Navigation** | NavMenu, Breadcrumbs, Tabs, Links |
20| **Layout** | Grid, Container, Paper, Stack, Drawer, AppBar |
21
22### When to Use This Skill
23
24Use this skill when:
25- Building forms with validation and user feedback
26- Creating data tables and grids with sorting, filtering, and paging
27- Implementing dialog-based workflows
28- Setting up application layouts and navigation
29- Theming and styling Blazor applications
30- Integrating MudBlazor with Neatoo domain objects
31
32## Quick Start
33
34### Installation
35
36```bash
37dotnet add package MudBlazor
38```
39
40### Required Configuration
41
42**Program.cs:**
43```csharp
44using MudBlazor.Services;
45
46builder.Services.AddMudServices();
47```
48
49**_Imports.razor:**
50```razor
51@using MudBlazor
52```
53
54**MainLayout.razor - Required Providers:**
55```razor
56<MudThemeProvider />
57<MudPopoverProvider />
58<MudDialogProvider />
59<MudSnackbarProvider />
60
61<MudLayout>
62 @Body
63</MudLayout>
64```
65
66**App.razor or index.html - Required Assets:**
67```html
68<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
69<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
70<script src="_content/MudBlazor/MudBlazor.min.js"></script>
71```
72
73## Critical Rules
74
75### MudForm vs EditForm
76
77| Scenario | Use |
78|----------|-----|
79| MudBlazor's validation system | `MudForm` with `OnClick` handlers |
80| ASP.NET Core validation | `EditForm` with `ButtonType.Submit` |
81
82**WARNING: NEVER use `ButtonType="ButtonType.Submit"` with MudForm.**
83
84### Four Required Providers
85
86All four providers must be in MainLayout for MudBlazor to function:
87
88| Provider | Purpose |
89|----------|---------|
90| `MudThemeProvider` | Theme and styling |
91| `MudPopoverProvider` | Popover positioning |
92| `MudDialogProvider` | Dialog service |
93| `MudSnackbarProvider` | Snackbar notifications |
94
95### Complex Object Selection
96
97**WARNING:** When using `MudSelect` or `MudDataGrid` with complex objects, you MUST implement `IEquatable<T>` or provide a `Comparer`. Selection will not work correctly otherwise.
98
99### Dialog Result Handling
100
101**WARNING:** Always check if dialog was canceled before accessing result data. Accessing `result.Data` on a canceled dialog will throw.
102
103See [Best Practices](best-practices.md) for code examples.
104
105## Additional Resources
106
107For detailed guidance, see:
108- [Core Concepts](core-concepts.md) - Variants, spacing utilities, color system
109- [Installation & Setup](installation.md) - Full setup guide, providers, assets
110- [Form Components](form-components.md) - TextField, Select, DatePicker, validation
111- [Data Display](data-display.md) - DataGrid, Table, Cards
112- [Feedback Components](feedback-components.md) - Dialog, Snackbar, Alert
113- [Layout System](layout-system.md) - Grid, Container, responsive patterns
114- [Navigation](navigation.md) - NavMenu, Tabs, Breadcrumbs
115- [Theming](theming.md) - Custom themes, dark mode, CSS variables
116- [Neatoo Integration](neatoo-integration.md) - MudNeatoo components for domain objects
117- [Best Practices](best-practices.md) - Patterns, anti-patterns, performance
118
119## Official Documentation
120
121- [MudBlazor Documentation](https://mudblazor.com/docs/overview)
122- [MudBlazor GitHub](https://github.com/MudBlazor/MudBlazor)
123- [MudBlazor Examples](https://try.mudblazor.com/)
majiayu000