MudShell

A Razor Class Library of opinionated Blazor components built on top of MudBlazor 9, designed for dark-mode AI-shell style applications.

Features

• 🎨 Pre-configured dark/light MudTheme — just call CreateDarkTheme()
• 🗂 MbxAppShell — full-page shell with collapsible sidebar, background image/palette modes
• 📱 Fully responsive — sidebar on desktop, MbxBottomNav on mobile (≤ 959 px)
• 💬 MbxChatBar — glassmorphism input bar
• 🃏 MbxDocumentCard, MbxFilterTabBar, MbxPageHeader
• All components use scoped CSS — zero global style pollution

Quick start

1. Add the project reference

<!-- YourApp.csproj -->
<ItemGroup>
  <ProjectReference Include="..\MudShell\MudShell.csproj" />
</ItemGroup>

2. Register services

// Program.cs
builder.Services.AddMudShell();

3. Add global imports

@* _Imports.razor *@
@using MudShell
@using MudShell.Components.AppShell
@using MudShell.Components.Sidebar
@using MudShell.Components.BottomNav
@using MudShell.Components.ChatBar
@using MudShell.Components.DocumentCard
@using MudShell.Components.FilterTabBar
@using MudShell.Components.PageHeader

4. Use MbxAppShell in your layout

@* MainLayout.razor *@
@inherits LayoutComponentBase

<MbxAppShell BackgroundMode="MbxAppShell.MbxBackgroundMode.Palette">
  <SidebarContent>
    <!-- your nav -->
  </SidebarContent>
  <ChildContent>
    @Body
  </ChildContent>
  <BottomNavContent>
    <MbxBottomNav Items="@navItems" />
  </BottomNavContent>
</MbxAppShell>

Documentation

• Getting started
• Theming
• Responsive
• Architecture
• Components: AppShell · Sidebar · BottomNav · ChatBar · DocumentCard · FilterTabBar · PageHeader