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

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

WARNING: NEVER use ButtonType="ButtonType.Submit" with MudForm.

Four Required Providers

All four providers must be in MainLayout for MudBlazor to function:

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

• MudBlazor Documentation
• MudBlazor GitHub
• MudBlazor Examples