Reusable MudBlazor extensions and utility components by FreemanCraft.
$ dotnet add package FreemanCraft.MudBlazorAddonsProductivity components and lightweight services extending MudBlazor for Blazor (.NET 8 / .NET 9): dynamic runtime drawers, an IDE‑style bottom dock workspace, and copy/clipboard helpers designed for rapid internal tooling, dashboards, and developer UX panels.
RenderFragment content)net8.0, net9.0dotnet add package FreemanCraft.MudBlazorAddons
NuGet: https://www.nuget.org/packages/FreemanCraft.MudBlazorAddons Repository: https://github.com/freeman412/MudBlazor.Addons
Ensure MudBlazor is in your .csproj:
<ItemGroup>
<PackageReference Include="MudBlazor" Version="8.*" />
</ItemGroup>
builder.Services.AddMudServices();
builder.Services.AddScoped<DrawerService>();
builder.Services.AddScoped<BottomDockService>();
<MudLayout>
<MudAppBar Elevation="1">My App</MudAppBar>
<MudMainContent>
@Body
</MudMainContent>
<DrawerHost />
<BottomDockHost />
</MudLayout>
@inject DrawerService DrawerService
@using MudBlazor
<MudButton OnClick="OpenLogDrawer" Variant="Variant.Outlined" Color="Color.Info">
Open Log Drawer
</MudButton>
@code {
private void OpenLogDrawer()
{
var id = Guid.NewGuid();
RenderFragment body = @<MudText Typo="Typo.body2">Log output here...</MudText>;
DrawerService.AddDrawer($"Logs - {id.ToString()[..8]}", body, id);
}
}
<CopyToClipboard Text="dotnet add package FreemanCraft.MudBlazorAddons" />
Program.cs:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMudServices();
builder.Services.AddScoped<DrawerService>();
builder.Services.AddScoped<BottomDockService>();
var app = builder.Build();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
Feature Component:
@inject DrawerService DrawerService
@inject BottomDockService DockService
<MudStack Row="true" Spacing="2">
<MudButton OnClick="OpenMetrics" Color="Color.Primary">
Live Metrics
</MudButton>
<MudButton OnClick="OpenConsole" Color="Color.Secondary">
Console
</MudButton>
</MudStack>
@code {
private void OpenMetrics()
{
RenderFragment content = @<div>
<MudText Typo="Typo.h6">System Metrics</MudText>
<MudProgressLinear Value="75" Color="Color.Success" />
<MudText>CPU: 75% | Memory: 2.1GB</MudText>
</div>;
DrawerService.AddDrawer("Live Metrics", content, Guid.NewGuid());
}
private void OpenConsole()
{
RenderFragment console = @<div>
<MudText Typo="Typo.body2" Style="font-family: monospace;">
> dotnet run<br/>
> Application started successfully
</MudText>
</div>;
DockService.AddTab("Console", console, Guid.NewGuid());
}
}