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