MudBlazor extension components from contributors. Includes 30+ components and utilities.
Get Started
$ dotnet add package CodeBeam.MudBlazor.ExtensionsReadme
CodeBeam.MudExtensions
Useful third party extension components for MudBlazor, from the community contributors.
TheMudSecondary
Utilities
- MudCssManager
Components
- MudAnimate
- MudBarcode
- MudChipField
- MudCodeInput
- MudCodeViewer
- MudColorProvider
- MudComboBox
- MudCsvMapper
- MudDateWheelPicker
- MudFontPicker
- MudGallery
- MudInputStyler
- MudLoading
- MudLoadingButton
- MudPage
- MudPasswordField
- MudPopup
- MudRangeSlider
- MudScrollbar
- MudSection
- MudSpeedDial
- MudSplitter
- MudSwitchM3
- MudTeleport
- MudTextM3
- MudToggle
- MudTransferList
- MudWatch
- MudWheel
Extended Components
- MudListExtended
- MudSelectExtended
- MudStepperExtended
- MudTextFieldExtended
Playground
- Docs https://mudextensions.codebeam.org/
- Try MudExtensions https://trymudextensions.pages.dev/
Breaking Changes
Look at the Breaking Changes
API
https://mudextensions.codebeam.org/api
Supported MudBlazor Versions
| MudExtensions | MudBlazor | .NET | Support |
|---|---|---|---|
| 6.0.0 - 6.0.3 | 6.0.16 | .NET 6 | Ended |
| 6.0.4 - 6.0.12 | 6.0.17 - 6.0.18 | .NET 6 | Ended |
| 6.1.0 - 6.1.4 | 6.1.0 - 6.1.2 | .NET 6 & 7 | Ended |
| 6.1.5 - 6.1.9 | 6.1.4 - 6.1.7 | .NET 6 & 7 | Ended |
| 6.2.0 - 6.2.5 | 6.1.8 | .NET 6 & 7 | Ended |
| 6.2.6 - 6.4.8 | 6.1.9 - 6.2.0 | .NET 6 & 7 | Ended |
| 6.4.9 - 6.6.x | 6.2.1 - 6.11.1 | .NET 6 & 7 | Ended |
| 6.8.0 - 6.9.2 | 6.12.0 - 6.21.0 | .NET 6 & 7 & 8 | Ended |
| 7.0.0 - 7.1.0 | 7.0.0 - 7.16.0 | .NET 7 & 8 | Ended |
| 8.0.0 => | 8.0.0 => | .NET 8 & 9 | Limited |
| 9.0.0 => | 9.0.0 => | .NET 8 & 9 & 10 | Full |
Installation
This extension uses MudBlazor features (need to set up MudBlazor if you didn't before), so only need to add this line described below:
Add the following to your HTML head section, it's either index.html or _Layout.cshtml/_Host.cshtml depending on whether you're running Server-Side or WASM.
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
// For MudCodeViewer component only (needs CodeBeam.MudBlazor.Extensions.Code package)
<link href="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.css" rel="stylesheet" />
Add the following to your HTML body section
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
// For MudCodeViewer component only (needs CodeBeam.MudBlazor.Extensions.Code package)
<script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.js"></script>
Add the extension services into Program.cs
using MudExtensions.Services;
builder.Services.AddMudExtensions();
Adding namespace to _Imports.razor is not obligatory, but useful.
@using MudExtensions
Examples
Each example is recorded in the playground website.
MudAnimate
MudCodeInput
MudDateWheelPicker
MudFontPicker
MudGallery
MudInputStyler
MudPopup
MudSpeedDial
MudStepper
MudWheel
Contribution
Feel free to contribute.
Updating css / Compiling from scss
- If you update or create an new scss file you will need to uncomment MudBlazor.SassCompiler line in
CodeBeam.MudBlazor.Extensions.csprojotherwise added and changed scss file has no effect on project.