Sign in Subscribe

MudBlazor Theme Composition with Bootstrap

MudBlazor Theme Composition with Bootstrap

Creating a custom MudBlazor theme using a Bootstrap template as a starting point involves mapping Bootstrap CSS concepts to MudBlazor’s theming system. Here’s a clear step-by-step guide:

✅ Step 1: Set Up Your Project

Ensure you have an existing Blazor application with MudBlazor installed. If you haven't already done so:

dotnet new blazorserver -o MudBootstrapTheme
cd MudBootstrapTheme
dotnet add package MudBlazor

In your _Imports.razor, add:

@using MudBlazor

✅ Step 2: Add Bootstrap Template

Include your Bootstrap CSS into your Blazor project.

Option 1: CDN (fastest way):

In your wwwroot/index.html or wwwroot/_Host.cshtml (for Server):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Option 2: Download Bootstrap CSS locally:

  • Place bootstrap.min.css into your wwwroot/css folder.
  • Reference it in your HTML:
<link href="css/bootstrap.min.css" rel="stylesheet">

✅ Step 3: Integrate MudBlazor Components

To properly use MudBlazor, set up the MudThemeProvider in your app (App.razor):

<MudThemeProvider Theme="@_customTheme">
    <MudDialogProvider />
    <MudSnackbarProvider />
    @Body
</MudThemeProvider>

@code {
    private MudTheme _customTheme = new MudTheme();
}

✅ Step 4: Customize MudBlazor Theme Based on Bootstrap

MudBlazor uses a structured theme system. Take colors, fonts, and other properties from your Bootstrap template and map them to MudBlazor's theme properties.

Example (common approach):

@code {
    private MudTheme _customTheme = new MudTheme()
    {
        Palette = new Palette()
        {
            Primary = "#0d6efd",          // Bootstrap Primary
            Secondary = "#6c757d",        // Bootstrap Secondary
            Tertiary = "#6610f2",         // Bootstrap Indigo
            Info = "#0dcaf0",             // Bootstrap Info
            Success = "#198754",          // Bootstrap Success
            Warning = "#ffc107",          // Bootstrap Warning
            Error = "#dc3545",            // Bootstrap Danger
            Dark = "#212529",
            Background = "#ffffff",
            Surface = "#ffffff",
        },
        Typography = new Typography()
        {
            Default = new Default()
            {
                FontFamily = new[] { "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif" },
                FontSize = "0.9rem",
                FontWeight = 400,
            },
            H1 = new H1() { FontSize = "2.5rem", FontWeight = 500 },
            H2 = new H2() { FontSize = "2rem", FontWeight = 500 },
            H3 = new H3() { FontSize = "1.75rem", FontWeight = 500 },
        },
        LayoutProperties = new LayoutProperties()
        {
            DefaultBorderRadius = "0.375rem",  // Bootstrap default border radius
        }
    };
}

How to Map Bootstrap’s colors to MudBlazor:

Bootstrap CSS Class MudBlazor Palette Property
.bg-primary Primary
.bg-secondary Secondary
.bg-success Success
.bg-info Info
.bg-warning Warning
.bg-danger Error
.bg-dark Dark

Use Chrome DevTools or inspect Bootstrap's CSS directly to find exact hex color values.

✅ Step 5: Adjust Global CSS to Match Bootstrap

To align MudBlazor components closely to your Bootstrap template, you may need extra CSS overrides.

In wwwroot/css/site.css add something like:

/* Override MudBlazor default button style to match Bootstrap */
.mud-button-root {
    text-transform: none; /* Removes uppercase styling by default */
}

/* Align MudBlazor padding closer to Bootstrap */
.mud-input-slot {
    padding: 0.375rem 0.75rem; /* Bootstrap input padding */
}

/* Bootstrap-like shadow for cards */
.mud-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    border-radius: 0.375rem;
}

/* Bootstrap-like form controls */
.mud-input-control {
    min-height: 2.25rem;
}

✅ Step 6: Test Your Theme

Now, use MudBlazor components in your Razor pages/components and visually verify alignment with your Bootstrap look:

<MudContainer MaxWidth="MaxWidth.Large">
    <MudCard Class="my-4">
        <MudCardContent>
            <MudText Typo="Typo.h4" Color="Color.Primary">Bootstrap-Themed MudBlazor</MudText>
            <MudButton Color="Color.Primary">Primary Action</MudButton>
            <MudButton Color="Color.Secondary">Secondary Action</MudButton>
        </MudCardContent>
    </MudCard>
</MudContainer>

Run your app with:

dotnet run

✅ Advanced Optional Tips

  • Consider using SCSS (SASS) to better integrate Bootstrap styles with MudBlazor.
  • Create a style-guide page (/styleguide) demonstrating all common components for easier alignment.

🎯 Conclusion

By carefully mapping colors, fonts, spacings, and shadows from Bootstrap to MudBlazor, you get a consistent and visually pleasing design. MudBlazor is highly flexible, so tweaking it to closely resemble Bootstrap's theme is straightforward.

If you need further refinements or have specific Bootstrap templates you’re integrating, feel free to share those details!

Project Structure & UI Layer Overview

The Programming.Team.Web Blazor project follows a clean separation of UI concerns. Key layout and shared UI components live under the Shared/ folder, while pages for different features (Admin, Purchasing, Recruiter, Resume, etc.) are organized under Pages/ in sub-folders. For example, the Shared folder contains common UI building blocks like the main layout and navigation menu:

  • MainLayout.razor – the application’s primary layout component
  • NavMenu.razor – the sidebar navigation menu component
  • LoginDisplay.razor – login/logout UI (for authentication)
  • AlertView.razor – a custom alert/toast component
  • ImpersonatorHeaderView/NavItemView.razor – UI for user impersonation feature (if applicable)

Static assets are under wwwroot/ (CSS, images, etc.). Notably, there is a wwwroot/css/site.css (currently containing base styles and Open Iconic, likely from the default Blazor template) and an images/ folder (e.g. containing a logo.png for branding) (Programming.Team/Programming.Team.Web/Shared at master · jlind0/Programming.Team · GitHub) (Programming.Team/Programming.Team.Web/wwwroot/images at master · jlind0/Programming.Team · GitHub). The Blazor hosting pages _Host.cshtml (for server) or index.html (for WASM) include references to these static assets and bootstrap the Blazor app.

The project is already configured to use MudBlazor components. In fact, MainLayout.razor is based on a MudBlazor layout: it wraps the app in a <MudLayout> with a <MudAppBar> (top navigation bar) and a <MudDrawer> (sidebar menu) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). This means the structure for integrating the Hyper template’s layout is largely in place using MudBlazor’s layout primitives. The NavMenu.razor is implemented with MudBlazor’s nav components (MudNavMenu, MudNavLink, MudNavGroup, etc.) rather than plain HTML or Bootstrap classes (Programming.Team/Programming.Team.Web/Shared/NavMenu.razor at master · jlind0/Programming.Team · GitHub) (Programming.Team/Programming.Team.Web/Shared/NavMenu.razor at master · jlind0/Programming.Team · GitHub). The UI architecture is therefore well-prepared to apply a custom theme – the goal will be to skin these MudBlazor components to match Hyper’s visual style without disrupting the component structure or page logic.

Mapping Hyper’s Layout to MudBlazor Components

The Hyper template’s layout consists of a vertical sidebar navigation and a top navbar (with optional dropdowns for notifications, user profile, etc.). We will map each of these elements to MudBlazor components, taking advantage of the existing MainLayout structure:

  • Sidebar (Left Nav Menu): In MudBlazor, this is represented by a <MudDrawer> inside the MainLayout. The project already uses <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"> in MainLayout (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub), which creates a persistent left drawer. We will place the nav menu inside this drawer. The current NavMenu.razor (already using <MudNavMenu>...</MudNavMenu>) can be enhanced to reflect Hyper’s menu structure and styling. For example, Hyper’s template often groups menu items under section headers (e.g. “Apps”, “Pages”, “Components”). We can represent those using non-clickable labels or MudNavGroups:

  • Top Navbar: MudBlazor’s <MudAppBar> maps to Hyper’s top navigation bar. In MainLayout, the MudAppBar is already defined with an Elevation="1" (slight shadow) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). We will customize it to visually match Hyper’s header:

    • Brand/Logo: If Hyper’s design shows a logo or site title at top, we can include that inside MudAppBar. For example, adding in MainLayout:
      <MudAppBar ...>
  <MudIconButton Icon="@Icons.Material.Filled.Menu" Edge="Edge.Start" Color="Color.Inherit" @onclick="DrawerToggle" />
  <MudText Class="ml-2 mud-app-title">Programming.Team</MudText>
  <MudSpacer /> 
  ... (right-aligned items)
</MudAppBar>
      This would show a hamburger menu icon (to toggle the drawer for small screens) and the app name or logo. (The project already has a MudIconButton for the menu toggle and a placeholder MudText (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub), which we can replace with the actual logo text or image.) If using an image logo, we could do <img src="images/logo.png" alt="Logo" class="mx-2" style="height:30px;" /> in the app bar.
    • Right-side widgets: Hyper’s top bar typically includes icons for notifications, a dropdown for the user profile, possibly a quick settings or fullscreen toggle, etc. These can be built using MudBlazor components:
      • Notifications icon with a badge: use <MudIconButton Icon="@Icons.Material.Filled.Notifications" /> and possibly wrap it in a MudBadge for an unread count. MudBlazor has MudBadge which can show a small count bubble on an icon.
      • User profile dropdown: use <MudMenu> component. MudMenu can render a button (e.g. an avatar or user name) and on click show a list of menu items (profile, settings, logout, etc.). For example:
        <MudMenu Icon="@Icons.Material.Filled.AccountCircle" Label="Account" AnchorOrigin="TopRight" TransformOrigin="TopRight">
    <MudMenuItem OnClick="...">My Account</MudMenuItem>
    <MudMenuItem OnClick="...">Settings</MudMenuItem>
    <MudMenuItem OnClick="...">Logout</MudMenuItem>
</MudMenu>
        This would resemble Hyper’s user menu (which in Hyper is typically a dropdown with the user’s name and options). We can style it via MudTheme (for colors) and minor CSS (for any custom avatar image or alignment).
      • Search bar: If Hyper’s template includes a search box in the navbar, we can include a MudTextField or an icon that opens a search dialog. A MudTextField with Icon="@Icons.Material.Filled.Search" and Placeholder="Search..." could be placed in the appbar. For example, <MudTextField T="string" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" Class="appbar-search" /> and then in CSS give .appbar-search a suitable width and style (or use MudBlazor’s utility classes for margin/padding).
    • Styling & Behavior: We will set the MudAppBar to have Hyper’s background style. In the custom theme (discussed next) we can specify PaletteLight.AppbarBackground and AppbarText colors. Currently, the code sets the app bar background to a translucent white (rgba(255,255,255,0.8)) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub), similar to Hyper’s modern look (a semi-transparent white navbar) and the text color to a dark gray (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). We’ll retain or adjust these to match Hyper’s exact values. MudAppBar can be made fixed or sticky if Hyper’s template keeps the navbar on top during scroll – by default MudAppBar is fixed at top, which is likely desirable.

In summary, MudBlazor’s layout components already cover the structural needs: a persistent left drawer for the sidebar, and a top app bar for the header. We will populate these with content (logo, menu items, icons) following Hyper’s design, and use MudBlazor’s built-in responsiveness (the MudDrawer can be configured to collapse on small screens and toggle via the menu button). The key is to apply Hyper’s styling (colors, spacing, fonts) to these components so that the look & feel aligns with the Hyper template, which we’ll handle via theming and CSS.

Translating Hyper’s Color Palette & Typography into a MudTheme

To make MudBlazor components look like Hyper, we will define a custom MudBlazor theme that mirrors Hyper’s color palette and fonts. MudBlazor allows extensive theming through the MudTheme object, which we provide to a <MudThemeProvider> wrapping our app (already present in MainLayout) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). The project has started this process by defining a _theme in MainLayout’s code-behind and assigning it to MudThemeProvider (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). We will extend this _theme with Hyper’s design tokens:

  • Color Palette: Hyper (being a Bootstrap 5 based theme) uses a set of primary, secondary, success, info, warning, danger colors, etc., along with light/dark backgrounds. We should map these to MudBlazor’s palette properties. In MudBlazor v8, we typically set PaletteLight for light mode. For example:

    @code {
    private MudTheme _theme = new MudTheme() {
        PaletteLight = new PaletteLight() {
            Primary = "#727cf5",       // Hyper primary brand color (e.g., a purplish-blue)
            Secondary = "#6c757d",    // Secondary (perhaps a gray tone)
            Success = "#0acf97",      // Success (green)
            Info = "#39afd1",         // Info (teal/cyan)
            Warning = "#ffbc00",      // Warning (amber)
            Error = "#fa5c7c",        // Danger/error (pinkish red)
            Background = "#f9f9f9",   // Page background color (Hyper’s content bg)
            AppbarBackground = "rgba(255,255,255,0.8)", // Translucent white navbar ([Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub](https://github.com/jlind0/Programming.Team/blob/master/Programming.Team.Web/Shared/MainLayout.razor#:~:text=AppbarText%20%3D%20%22))
            DrawerBackground = "#ffffff",  // White sidebar background ([Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub](https://github.com/jlind0/Programming.Team/blob/master/Programming.Team.Web/Shared/MainLayout.razor#:~:text=AppbarBackground%20%3D%20))
            Surface = "#ffffff",      // Card/background surface color (often white)
            AppbarText = "#424242",   // Navbar text/icon color (dark gray) ([Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub](https://github.com/jlind0/Programming.Team/blob/master/Programming.Team.Web/Shared/MainLayout.razor#:~:text=Black%20%3D%20%22))
            TextPrimary = "#343a40",  // Body text color (e.g., dark bootstrap default)
            TextSecondary = "#6c757d" // Secondary text color (muted)
        },
        // PaletteDark = ... (define if dark mode support is needed)
        Typography = new Typography() {
            Default = new Default() { FontFamily = "inherit" }, 
            // We will adjust FontFamily below if using a specific font
        },
        LayoutProperties = new LayoutProperties() {
            DrawerWidthLeft = "240px"  // match Hyper sidebar width if needed
        }
    };
}

    In the above snippet, we’ve inserted example color values (these could be adjusted to exactly match Hyper’s provided SCSS variables or color codes). For instance, Hyper’s default “SaaS” demo uses a indigo/purple tone for primary (the value #727cf5 is a guess based on similar Coderthemes templates, which can be updated to the exact Hyper primary). Secondary is a neutral gray (Bootstrap’s default secondary). We’ve also aligned success/info/warning/error with Hyper’s vivid accent colors (these example values should be verified against Hyper’s stylesheet). The project already set some values like Black = "#110e2d" (possibly intended for dark backgrounds) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub); those can remain, but the above Primary/etc. will override the main theme colors for components:

    • Primary color will apply to buttons, links, and other accents that use the primary theme (e.g., MudButton with Color="Color.Primary"). Hyper’s primary color will thus propagate to MudBlazor buttons, toggles, etc.
    • Secondary, Success, etc. ensure that success messages, info badges, etc., use Hyper’s palette (ensuring consistency with any colored elements or alerts in the UI).
    • Background and Surface: By setting these to Hyper’s light grey/white, we align MudBlazor’s background. Hyper often uses a light grey page background (#f9f9f9 or similar) and white cards; mapping those ensures MudPaper/MudCard components render with correct colors.
    • DrawerBackground and AppbarBackground: Already set to white (sidebar) and semi-white (appbar) as seen in code (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). We will keep those, or adjust if Hyper’s navbar should be fully opaque or colored. (Hyper’s demos typically have a light navbar for light theme.)
    • AppbarText was set to #424242 (a medium-dark gray) (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub), which works on a light background. We might deepen it to nearly black (#343a40 bootstrap text color) for contrast, but either is fine.
    • TextPrimary/Secondary: Not explicitly set in current code, but we should set them for consistency. Primary text (body text) likely a near-black (#343a40), and secondary (muted text) the bootstrap muted color (#6c757d), matching Hyper’s typography colors.

    Note: The actual color codes for Hyper can be pulled from Hyper’s SCSS (_variables.scss or _theme-mode.scss in the template). Adapting those exactly will give the most faithful result. The snippet above demonstrates where to plug them in. Once defined, these palette settings will automatically skin most MudBlazor components (buttons, links, nav active states, etc.) to the Hyper colors.

  • Typography: Hyper’s template likely uses standard Bootstrap font stack or a custom webfont. We need to ensure MudBlazor typography aligns with it:

    • If Hyper uses a custom font (the documentation doesn’t explicitly mention one, but many Coderthemes templates use a modern sans-serif like Nunito, Poppins, or similar), we should include it. This means adding a <link> in the head (e.g., to Google Fonts) or adding the font files to wwwroot/fonts and referencing them in CSS. For example, if Hyper uses Nunito, we’d add in _Host.cshtml head:
      <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet" />
      Then update the MudTheme’s Typography:
      Typography = new Typography() {
    Default = new Default { FontFamily = "Nunito, sans-serif" },
    H1 = new H1 { FontFamily = "Nunito, sans-serif", FontSize = "2rem", FontWeight = 600 },
    H2 = new H2 { FontFamily = "Nunito, sans-serif", FontWeight = 600 },
    Button = new Button { FontFamily = "Nunito, sans-serif", TextTransform = "none" }
    // ...etc for other styles as needed
}
      This ensures all MudBlazor components use Nunito instead of the default (which is Roboto or system font). We also turned off uppercase text for buttons by setting TextTransform = "none" on the Button style (MudBlazor by default doesn’t force uppercase, but ensuring it stays “none” matches Bootstrap’s normal-case buttons). If Hyper uses the default Bootstrap font stack (which is now a system-ui stack), we might simply leave the font as default or set FontFamily = "inherit" to not override. The key is to match whatever font and font-sizes Hyper uses for headings and body:
      • Hyper’s base font size is typically 0.875rem or 14px for body (Bootstrap default is 16px, but many admin themes use a slightly smaller base). We can adjust MudBlazor’s Default.FontSize if needed.
      • Heading sizes (H1, H2, etc.) can be tweaked in the Typography section to mirror Hyper’s stylesheet (for example, if Hyper’s H1 is 2rem, H2 1.5rem, etc., we set those values).
    • Line heights and spacing: MudBlazor typography also allows setting LineHeight and other properties. Bootstrap’s default line-height is ~1.5. We can usually rely on MudBlazor defaults here, or explicitly set Default.LineHeight = "1.5" to match.
    • In summary, include Hyper’s font (if any) and configure MudTheme.Typography to use it for all text styles. If no special font, ensure the font family is consistent (maybe use the same stack as Hyper or Bootstrap’s default, e.g. "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, etc").

Once the palette and typography are in place, assign this theme to the MudThemeProvider (as done already). This will globally apply Hyper’s colors and text styles to all MudBlazor components. For instance, a <MudButton Color="Color.Primary"> will now render in Hyper’s primary color with the chosen font, and a <MudTable> will use the Background/Surface colors for its header and rows as defined.

Tip: During development, you can use MudBlazor’s ThemeManager or browser dev tools to fine-tune these values. MudBlazor’s ThemeManager (a built-in utility) can be temporarily added to tweak colors and see the effect live (Exploring the MudThemeProvider in MudBlazor: A Comprehensive Guide - crispycode.net) (Exploring the MudThemeProvider in MudBlazor: A Comprehensive Guide - crispycode.net), which might speed up matching the Hyper palette exactly.

Adapting Components to Hyper’s Style (Buttons, Cards, Forms, etc.)

With the theme foundation set, most MudBlazor components will automatically take on the Hyper look. However, to fully match Hyper’s UI elements (buttons, cards, tables, alerts, etc.), we should consider a few component-specific tweaks and reusability strategies:

  • Buttons: MudBlazor <MudButton> will use the theme colors for its various variants. To emulate Hyper’s button styles:

    • Filled buttons: By default, MudButton with Color="Primary" will produce a solid button in the primary color. This corresponds to Hyper’s primary buttons (e.g., a “Save” button in Hyper’s style). Ensure the theme’s Primary is set correctly so these match color. MudBlazor also applies a hover effect (slightly darker shade) automatically using the palette. If Hyper uses slightly rounded corners (Bootstrap default 0.25rem radius), MudBlazor’s default border-radius (4px) is the same, so it should look similar. If Hyper’s buttons are more square or more rounded, we might add a CSS override. For instance, to make buttons slightly rounder, .mud-button-root { border-radius: 0.3rem; } in site.css. But likely this isn’t needed if the default is acceptable.
    • Outlined buttons: Hyper’s template might have “outline” style buttons (border only, no fill) for secondary actions. MudButton supports Variant="Outlined" which will draw a colored border and no fill. Using Color="Primary" with Variant="Outlined" would mimic Hyper’s outline-primary button. We should verify that the border and text colors align with Hyper (MudBlazor will use the primary color for border/text by default). If Hyper’s outline buttons use a lighter tint on hover, we might need custom CSS, but MudBlazor typically handles hover by lightening the color.
    • Soft/Alt buttons: Some modern templates have “soft” buttons (colored light background). MudBlazor’s Variant="Filled" with a low Elevation or custom class could approximate this. Alternatively, if Hyper defines a CSS class for a softer look (like .btn-soft-primary with a pastel background), we can mimic it by applying a lighter shade of primary from the palette or writing a utility class. For example, define in CSS:
      .btn-soft-primary { 
  background-color: rgba(var(--mud-palette-primary-rgb), 0.15); 
  color: var(--mud-palette-primary); 
}
      and use <MudButton Class="btn-soft-primary" Color="Primary" DisableElevation="true">. This would give a faint primary tint background. This is optional and only if such styles are needed for specific UI elements.
    • Icons on buttons: Hyper often uses icon buttons or icons with text. MudButton easily allows putting MudIcon inside. Also MudIconButton is used for standalone icons (the project already uses MudIconButton for the menu toggle (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub)). We should ensure icons are using the theme colors (they do via Color="Inherit" which makes them the same color as appbar text, etc.). If Hyper uses a different icon set (Remix icons), those can be included (see “Assets” below), but the current approach using Material icons is fine since MudBlazor comes with Material Icons by default.

  • Cards & Panels: In Hyper, content cards (dashboard widgets, form panels, etc.) have a certain style – usually a white background, rounded border, and subtle shadow. MudBlazor’s <MudCard> or <MudPaper> corresponds to these:

    • By default, MudCard has a white surface with a shadow (elevation). We can adjust the shadow depth to match Hyper. Hyper’s cards often have a slight shadow and a border. We can configure this in theme or CSS. MudTheme has a Shadows property where each elevation’s CSS shadow can be overridden. For instance, to make Elevation=1 a smaller shadow, or Elevation=2 a certain RGBA value similar to Hyper’s. If we want a border around cards (Hyper might use a light gray border on card containers), we can add a CSS rule: .mud-paper-outlined { border: 1px solid #e8e8e8; } or use MudCard’s Outlined="true" attribute which gives a border using Palette.GrayLight by default. The theme already sets GrayLight = "#e8e8e8" and GrayLighter = "#f9f9f9" (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub), matching typical border and background grays. Using Outlined=true on MudCard will use GrayLight for the border (which is exactly #e8e8e8 we set) and yield a Hyper-like card border.
    • Card Headers/Footers: If Hyper has card components with header sections (title and icon in header, etc.), we can use <MudCardHeader> and <MudCardContent> to structure them. Style the header with maybe a particular background or font weight. For example, Hyper might have a card header in a lighter gray background – we can achieve that with a class using GrayLighter (#f9f9f9). E.g., <MudCardHeader Class="bg-light">Title</MudCardHeader> and define .bg-light { background-color: #f9f9f9; } (or use MudBlazor’s utility if available).
    • Reusable Card Component: If many pages use a similar card pattern, consider creating a Razor component (e.g., HyperCard.razor) that wraps MudCard with predefined classes (to consistently apply header style, etc.). This promotes reuse and ensures all cards look uniform.

  • Tables and Lists: Hyper’s dashboard tables and lists (e.g., recent transactions list, etc.) should be mimicked with <MudTable> or <MudList>:

    • MudTable: We can style MudTable to look like a Bootstrap table. By default, MudTable has no outer borders and subtle row highlighting on hover. To match Bootstrap style:
      • Enable row stripes if Hyper uses them: MudTable has Striped="true" to alternate row colors (it will use theme’s TableStriped color from the palette or default light grey).
      • Enable borders: MudTable doesn’t have a built-in “bordered” mode like Bootstrap, but we can use CSS: .mud-table td, .mud-table th { border-bottom: 1px solid #e8e8e8; } to add horizontal dividers, and .mud-table thead th { border-bottom: 2px solid #e8e8e8; } for the header bottom border. This will resemble a classic table grid. Ensure to use the GrayLight we defined for consistency.
      • Header background: If Hyper gives table headers a light background, add .mud-table thead th { background-color: #f9f9f9; color: #666; } (or set theme Palette.TableLines or similar if available in MudBlazor).
      • Font and padding: MudTable by default has padding similar to Material spec. Bootstrap tables have slightly tighter padding. We can override via CSS (e.g., .mud-table td { padding: 0.5rem 0.75rem; } if needed).
    • MudList / MudNavMenu: For simpler vertical lists or side-menu style lists (like maybe an inbox list), MudList with MudListItems can be used and styled via theme colors (selected item background etc. derive from primary or secondary color). Given the context, focusing on MudTable for admin data grids is likely enough.

  • Forms & Inputs: Hyper’s forms (text inputs, dropdowns, checkboxes) should align with MudBlazor forms:

    • Text fields: By default MudBlazor text fields are “MudTextField” with a Material underline style. To mimic Bootstrap’s bordered inputs, we can set the Variant="Variant.Outlined" on MudTextField (this gives a full rectangle outline). We can also set Outlined=true on MudSelect, MudAutocomplete, etc., to give them a similar outlined style. This will make inputs look closer to Hyper’s Bootstrap form fields. Additionally, MudBlazor’s outlined variant still uses a floating label by default (label moves above field when focused). If Hyper uses placeholder text instead of floating labels, we can choose not to set the Label parameter but use Placeholder property on MudTextField. This way the UI is more Bootstrap-like (label above or placeholder inside).
    • Validation/error states: Hyper likely indicates invalid fields with red border or text. MudBlazor already does this if using <DataAnnotationsValidator> and validation messages – the error color will use Palette.Error (we set to Hyper’s danger pink/red). Ensure that looks correct (we might adjust Error color to exactly Hyper’s shade). Also, MudTextField’s error text can be styled via theme (Typography.Caption color perhaps).
    • Checkboxes & Radios: MudCheckBox and MudRadio styling will use the theme’s primary color for the check mark and radio dot. Hyper’s checkboxes (if any custom style) are probably default bootstrap (blue check). With primary set, these will appear in the primary color (e.g., purple if we chose that). If Hyper uses square switches or a custom look, MudBlazor might not match exactly without custom CSS, but typically it’s fine to use the default shape.
    • Labels and help text: Use <MudForm> and MudBlazor’s MudItem grid to align labels and inputs as needed, similar to Bootstrap’s grid form layout if needed. We might not need much custom layout since MudBlazor components are flexible, but be aware of spacing (MudBlazor uses Material Design spacing, which might be a bit more than Bootstrap’s). Minor CSS adjustments (like reducing margin under fields) can tighten the layout to feel more like Hyper’s.

  • Alerts & Messages: The project’s AlertView.razor appears to implement a custom alert popup using MudPopover and MudButton (Programming.Team/Programming.Team.Web/Shared/AlertView.razor at master · jlind0/Programming.Team · GitHub) (Programming.Team/Programming.Team.Web/Shared/AlertView.razor at master · jlind0/Programming.Team · GitHub). We should style this to match Hyper’s alert/toast style:

    • Hyper’s alerts (if referencing Bootstrap) have colored backgrounds for success, error, etc., or toasts that appear at the top. In our case, the AlertView uses a MudPopover centered with a message and a close button. Since it uses a MudButton with Color="@AlertSeverity" (Programming.Team/Programming.Team.Web/Shared/AlertView.razor at master · jlind0/Programming.Team · GitHub), the color of that Close button will use the theme’s AlertSeverity (which is set dynamically, defaulting to Error (Programming.Team/Programming.Team.Web/Shared/AlertView.razor at master · jlind0/Programming.Team · GitHub)). We can improve this by perhaps styling the popover itself: maybe give it a background color corresponding to the severity (e.g., light red for error). MudPopover can be styled via the Class parameter (we see Class="mux-popover-fixed px-4 pt-4" in the code (Programming.Team/Programming.Team.Web/Shared/AlertView.razor at master · jlind0/Programming.Team · GitHub)). We could define CSS for .mux-popover-fixed to include background-color: #ffecec (light red) if error, etc., but since this might be complex to do conditionally, an alternative is to use MudBlazor’s <MudAlert> component for simpler cases. MudAlert provides colored alert boxes out of the box. However, since AlertView is tied into ReactiveUI logic, we might leave its structure and simply adjust styling:

      • Set the MudText in the AlertView to use a color class based on severity (could bind CSS class via AlertSeverity).
      • Or replace the inner <div class="d-flex flex-column"> with a <MudPaper Class="p-3" Style="background: #f8d7da; color:#842029;"> for an error (these values are Bootstrap’s alert-danger background and text). This would give a red-tinted background with dark red text for an error alert, similar to Bootstrap’s .alert-danger. For success, use green tints, etc. We can compute these or use MudBlazor’s Palette.Error but lighten it.
      • A simpler route: use MudAlert component, e.g. <MudAlert Severity="MudBlazor.Severity.Error" Elevation="0" Square="true">Message</MudAlert> which will produce a styled alert (MudBlazor's alert will use palette colors – ensure they align with Hyper’s alert colors).

    • MudSnackbar: If we want toast notifications like Hyper’s “toast” messages, MudBlazor has a Snackbar service. We could potentially replace custom AlertView with MudSnackbar for simplicity. MudSnackbar can be themed (snackbar background uses Palette.Background or a specific color if configured). However, given AlertView is already implemented, we might keep it and just style it.

  • Icons and Iconography: Hyper uses Material Design Icons and Remix Icons (as per documentation). The project already leverages Material Icons via MudBlazor (the Icons.Material.Filled.* classes). MudBlazor by default includes a link to Material Icons font, so those should display. If specific Remix Icons are desired to match exactly some icon Hyper shows, we have options:

    • Include Remix Icon font: Add a link to remixicon CSS in _Host.cshtml (for example, <link href="https://cdn.remixicon.com/releases/v2.5.0/remixicon.css" rel="stylesheet">). Then you can use them by class name. MudBlazor’s <MudIcon> component can render any icon if you provide the correct CSS class and icon font family. e.g., <MudIcon Icon="ri-dashboard-line" IconSize="size.medium" /> after including the CSS (Remix icons use classes like ri-dashboard-line). Alternatively, just use an <i class="ri-dashboard-line"></i> in markup for static icons.
    • However, sticking to Material icons may be sufficient, since MudBlazor has a comprehensive set (and it keeps consistency). You can choose Material icons that closely resemble the Hyper ones. For example, if Hyper uses a specific icon from remix, find a Material equivalent (e.g., a pie-chart icon for dashboard). The current nav already does this (ManageAccounts icon for Admin, etc.) (Programming.Team/Programming.Team.Web/Shared/NavMenu.razor at master · jlind0/Programming.Team · GitHub). This avoids adding another icon library.
    • Custom SVGs: If Hyper provided any custom SVG icons (sometimes templates include logo icons), you can also embed those as <MudIcon Path="...svg path..."/> if needed, but likely unnecessary.

  • Reusing Components & Maintaining Consistency: To minimize repeated styling code:

    • Define common CSS classes in site.css (or a new SCSS file if using one) for frequently used styling patterns. For example: .card-header for a consistent card header style, .form-label if custom styling labels, etc. Use those classes in Razor components rather than inline styles.
    • If certain combinations of MudBlazor properties are always used together to achieve a style, consider wrapping in a component. For instance, if every form uses Variant="Outlined" on fields to get bootstrap look, you don’t need a new component, but ensure developers know to use Outlined variant by default (maybe create a project-specific wrapper like <PTTextField> that sets those parameters by default).
    • The LoginDisplay.razor and other identity components should also be updated to MudBlazor components or classes for consistency. If currently they rely on default styling (maybe anchor links for login/out), we can style those as MudButtons or MudMenuItems in the top bar.

In essence, MudBlazor’s component set covers almost all UI elements in Hyper, but small adjustments via parameters or CSS bring the visual style in line. We rely on the custom theme for broad color/typography changes, and use CSS overrides for finer details (spacing, borders, specific component appearances). The result will be that the app “feels” like Hyper (same colors, spacing, fonts, icons) while using MudBlazor components under the hood.

Organizing Theme Styles and Assets in the Solution

To keep the solution maintainable, we should organize all theme-related customizations (styles, assets from Hyper) logically:

  • Centralize CSS/SCSS Overrides: Rather than scattering style tweaks across components, collect them in the site.css or a new stylesheet. For example, we might create hyper-overrides.css (or hyper-theme.scss if using SCSS for easier nesting variables) in wwwroot/css/. This file would contain all CSS rules that override MudBlazor’s default classes or implement Hyper-specific styles. Some examples to put in this file:

    • Sidebar specific styles: e.g. .mud-nav-menu .mud-nav-link.mud-selected { background-color: rgba(var(--mud-palette-primary-rgb), 0.1); font-weight: 600; } to highlight the active menu with a slight primary color shade and bold text, similar to Hyper’s active state.
    • Reduce MudDrawer width or adjust it: .mud-drawer { width: 240px; } if Hyper’s sidebar is 240px (and correspondingly .mud-main-content { margin-left:240px; } if not using ClipMode.Always). However, since we can set DrawerWidthLeft in MudTheme’s LayoutProperties (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub), prefer that for width.
    • Any class names we introduced (like .mud-nav-category for section headers, or .btn-soft-primary) with their styling.
    • Typography adjustments if needed beyond MudTheme (e.g. if MudBlazor doesn’t apply font to html/body, you might enforce body { font-family: 'Nunito', sans-serif; font-size: 0.88rem; } as a catch-all).
    • Overriding default MudBlazor CSS where needed. MudBlazor’s DOM elements often have classes like mud-button-root, mud-text-field, etc. Use developer tools to inspect any element that doesn’t match Hyper’s style and then override it in this CSS. For instance, if the MudTextField outline color on focus is blue (Material default) but Hyper uses purple, we ensure our theme’s Primary is purple (which should change the outline). If some detail like focus box-shadow needs tweak, do .mud-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--mud-palette-primary-rgb), .25); } (mimicking bootstrap focus halo).

    By centralizing, if Hyper’s design updates or if we want to switch theme, it’s easier to manage. Also, include comments in the CSS to indicate which Hyper feature or design element the code corresponds to, for clarity.

  • Using SCSS and variables: If feasible, consider using SCSS to leverage Hyper’s own variables. For example, if you have Hyper’s _variables.scss, you could import it and then use those variables in crafting the CSS overrides. This way if you update the primary color in one place, it reflects everywhere. .NET projects can compile SCSS using a build tool or you can do it manually and include the compiled CSS. If adding SCSS compilation is overkill, plain CSS is fine – just be mindful to manually update colors if needed.

  • Assets (Images, Icons): Keep any Hyper asset files in logical places:

    • Put Hyper’s favicon or logos in wwwroot/images (the project already has a logo.png (Programming.Team/Programming.Team.Web/wwwroot/images at master · jlind0/Programming.Team · GitHub)). Ensure the favicon is set in _Host.cshtml if needed.
    • If using Hyper’s icon libraries (Remix or Material Design Icons webfont), you can either use CDN links or copy the fonts locally. Using CDN is quicker (just one line in host page). If you prefer local, download the CSS and font files into wwwroot/lib/remixicon/ and reference that CSS. Since MudBlazor already uses Material Icons, adding Remix is optional.
    • Hyper’s template might include some SCSS for custom components or plugins. Only bring those in if needed. For example, Hyper had a CSS for a timeline or a gantt chart plugin. If the app will use those pages, integrate the necessary CSS/JS for them (perhaps in wwwroot/lib/). Otherwise, avoid including unused files to keep things lean.
    • Remove or replace any unused default Blazor assets. For instance, the project has open-iconic CSS (from template) which may no longer be needed if all icons are from MudBlazor/Material. You can delete the reference to it in index.html or _Host.cshtml to avoid conflicts or bloat. Similarly, the default bootstrap.min.css from Blazor template might be referenced; if we fully style via MudBlazor and custom CSS, the Bootstrap CSS could be removed to prevent overriding MudBlazor styles (MudBlazor doesn’t require Bootstrap CSS). However, be cautious: if any BlazorBootstrap components remain, they rely on Bootstrap’s CSS/JS. Ideally, if migrating fully to MudBlazor, we can remove the BlazorBootstrap package and its static files after the transition to avoid style conflicts.

  • Respecting the Architecture: Continue to use the existing component structure when applying styles, rather than putting markup in pages directly. For example, to implement a new “Hyper-style” sidebar user info (if Hyper shows the logged-in user’s name and avatar in the sidebar top), add that to NavMenu.razor or a sub-component (e.g., a <ProfileSummary> component) instead of duplicating on pages. This keeps layout concerns in Shared. The goal is to maintain the separation of layout vs. content: The Hyper theme integration should primarily involve editing MainLayout.razor, NavMenu.razor, adding theme configuration in that scope, and adjusting Shared components. The individual feature pages (Pages/*) ideally require minimal changes – they should automatically pick up the new theme. Perhaps a few pages that used raw HTML might be converted to MudBlazor components (e.g., if an Edit form page had <input> elements, replace with MudTextField to get styled correctly by the theme).

  • Testing in Stages: It’s helpful to test the theme in an isolated manner. For instance, once you set up the MudTheme with palette and typography, run the app and verify the base styles (check a simple page with a button, a link, etc.). Adjust site.css in browser dev tools to refine. By iterating in the development environment (especially with Hot Reload or similar), you can quickly converge on the desired look.

The end result of organizing styles properly is that the Hyper theme becomes a thin layer on top of MudBlazor – easy to adjust or switch if needed, and not tangled with business logic. All colors and fonts are defined in one place (MudTheme plus CSS), and any future design changes (like switching to Hyper’s dark mode) could be done by swapping those definitions rather than changing every component.

Phased Integration Plan

Integrating the Hyper theme into an existing project should be done in stages to minimize disruption and allow verification at each step. Here’s a suggested phase-wise approach:

  1. Theme Foundation First: ("Skin" the app before altering structure) – Start by defining the MudTheme with Hyper’s palette and basic styles in MainLayout (or a theme file). Inject this theme via <MudThemeProvider> (Programming.Team/Programming.Team.Web/Shared/MainLayout.razor at master · jlind0/Programming.Team · GitHub). At this phase, focus on global look: set the colors (primary, etc.) and font. After this step, even without changing any markup, the app’s color scheme will shift to Hyper’s. For example, all buttons and links will turn to the new colors, text will use the new font. Verify that the theme loads (the app should still function the same, just with different colors). This immediately gives a visual alignment with Hyper. It’s easier to spot issues (like color contrast or missing variables) early. Example: After phase 1, you might notice the NavMenu’s active item highlight is still the MudBlazor default blue – that would indicate we forgot to set Primary or DrawerText properly; we can fix that now. Essentially, in this step you are plugging in Hyper’s design tokens.

  2. Layout & Navigation Update: Once the theme is in place, move to adapting the layout components:

    • Implement the Hyper-style navbar and sidebar in the existing MainLayout and NavMenu. Add the pieces like the profile menu, notification icons, search bar, etc., into the MudAppBar. Style the NavMenu content (section headers, group icons, etc.) as described. At this stage, you are not changing how navigation works, just its content/appearance. The sidebar menu items and routing remain the same, but you might regroup or label them according to Hyper’s UI structure (for instance, if Hyper’s template expects certain grouping, you can reorganize the NavMenu if it makes sense).
    • Ensure the responsive behavior: test collapsing the drawer (MudDrawer has a property Breakpoint to automatically switch to temporary drawer on small screens). You might set Breakpoint="Breakpoint.Md" so that below medium screen the sidebar hides and toggles with the menu icon, similar to Hyper’s responsive behavior. MudBlazor can handle this, just configure it.
    • This phase may involve some HTML markup from Hyper’s template (like inserting the logo image, or static text headings in the nav). Keep those within the Blazor components. For example, place the company logo in NavMenu (perhaps at the top of the drawer content).
    • After this, the overall frame of the app (navbars) should look like Hyper. Verify the sidebar looks correct (colors, active link highlighting with primary color, scrollbar if any, etc.), and the top bar (logo, icons placement).

  3. Component and Page Refinement: Now address the individual components on pages:

    • Go through each major page (or a representative page from each section like Admin, Resume, etc.) and check if any UI element looks off under the new theme. Common tasks:
      • Replace any remaining HTML elements with MudBlazor counterparts to ensure they get themed. For example, if a page has <table class="table"> from earlier, convert it to <MudTable> for consistent styling (or keep it but then you’d have to manually style that table via CSS – better to use MudTable).
      • If the project was using BlazorBootstrap components (since the package is referenced (Programming.Team/Programming.Team.Web/Program.cs at master · jlind0/Programming.Team · GitHub)), identify those and replace with equivalent MudBlazor components. For instance, if BlazorBootstrap’s Modal or Table was used, swap in MudDialog or MudTable. This consolidation will prevent CSS conflicts and fully leverage the new theme. Do this gradually, testing each replacement.
      • Apply any specific Hyper styling to components on these pages. E.g., ensure forms have Variant="Outlined" on textfields as needed, add Striped="true" on tables, etc. Basically, tune the MudBlazor component usage to match the desired style.
      • Use the shared styles and components we set up. For example, if you created a HyperCard component for a consistent panel style, replace raw MudCards on pages with <HyperCard> so that those pages automatically get the updated style (this is a find-and-replace job across pages).
    • This phase can be done section by section. You might start with a simpler page (like the Home/Index page) to verify general components, then move to more complex pages (like an Admin list view with tables, or a Form for resume editing). After updating each, run the app to ensure nothing broke and the visuals improved.

  4. Iteration & Polish: Once all pages use MudBlazor components and the theme, do a UI review pass:

    • Compare with Hyper’s template screens (if you have the Hyper HTML template, open its pages side-by-side) to catch any remaining mismatches. For example, maybe the spacing between form fields is too large – you can adjust CSS margin on .mud-text-field classes. Or maybe Hyper uses all-caps for card headers – you could add TextTransform: uppercase in MudTheme for Subtitle1 if your card titles use that typography style.
    • Check edge cases: long text in sidebar (does it wrap nicely or overflow?), dark mode (if you intend to support Hyper’s dark theme mode eventually, see how it would be handled – you might prepare a PaletteDark in MudTheme for future). Also test with varied data: e.g. a table with many rows (does the styling hold up with scrollbars?), a form with validation errors (does the error message appear with correct colors?).
    • At this stage, you can also integrate any remaining Hyper-specific elements or scripts, like charts or widgets, if the template came with custom JS for dashboards. MudBlazor has chart components, but if Hyper’s design uses a certain chart library, ensure it’s included and styled. This is a bit beyond theming, but part of full integration.

  5. Cleanup and Final Alignment: After the UI looks correct and all functionality works with MudBlazor:

    • Remove the Blazor.Bootstrap dependency if it’s no longer used. This means deleting builder.Services.AddBlazorBootstrap() and the package reference (to avoid loading potentially conflicting Bootstrap JS/CSS). Verify nothing breaks without it. If some identity pages (for example, Azure AD login UI) was using it, ensure you restyle those parts with MudBlazor or static HTML.
    • Remove any leftover default styles that conflict. For instance, the default Blazor template adds a @inject NavigationManager in NavMenu with some active class logic – but since we replaced NavMenu with MudNavMenu, that may be gone. Also ensure the base bootstrap.min.css (if included in host page) is removed if not needed, so it doesn’t override our custom styling. MudBlazor does not require Bootstrap’s CSS, so it’s safe to drop if no other part needs it.
    • Double-check responsiveness and cross-browser compatibility. Hyper’s template is fully responsive; MudBlazor is as well, but ensure elements like the MudDrawer collapse properly on mobile, and the top bar items are accessible (maybe hide text labels and show just icons on smaller screens if needed).
    • Commit the changes for this phase, as this will be the “themed” version of the app.

By proceeding in these phases, you maintain a working application at each step. First you get the colors and fonts right (so even if some components aren’t perfect yet, the app already feels on-brand), then you refine layout (which might temporarily be cosmetic changes), then you tackle each functional area’s UI. This way, if something goes wrong, you know which phase likely introduced the issue, making it easier to debug.

Throughout the integration, keep the architecture intact – i.e., don’t put page-specific hacks in the global theme or vice versa. The final outcome will be a Blazor application that retains its well-organized component structure while presenting the polished Hyper UI/UX: the sidebar and navbar look identical to Hyper’s, the dashboard and forms have the same styling as Hyper’s components, and everything is managed through MudBlazor’s theme for consistency.

With this approach, Programming.Team.Web will have the modern, sleek look of the Hyper template, yet remain maintainable and extendable using MudBlazor’s framework. Any developer familiar with either MudBlazor or the Hyper design will be able to navigate the code and adjust the UI easily, achieving the goals of visual alignment and architectural respect.

Great, I’ll look into professional Bootstrap-based templates suitable for a small-scale LinkedIn-style application that includes an admin dashboard, landing page, and blog. I’ll focus on templates that can be adapted to MudBlazor, and include features like user profiles, authentication, messaging, content feeds, charts, and responsive layouts.

I’ll also highlight how their structure and style can be mapped or reimagined in a MudBlazor-based UI.

I’ll get back to you with a curated breakdown and design mapping soon.

Bootstrap Templates for a MudBlazor “LinkedIn-like” Web App

Introduction

Building a small-scale LinkedIn-like application with MudBlazor (a Blazor Material design component library) can be accelerated by referencing professional Bootstrap templates for design and layout ideas. We have curated 5 Bootstrap-based templates (mix of free and paid) that combine landing pages, admin dashboards, and social/blog features, closely aligning with the required features. For each template, we outline key components/pages (landing sections, auth forms, profiles, feeds, messaging UIs, admin charts, etc.) and note how these could map to MudBlazor components. This provides a blueprint for reimplementing the design in MudBlazor’s framework while maintaining a polished, responsive UI.

Key Features & Selection Criteria

The templates were chosen to cover the following essential features of our target application:

  • Responsive Landing Page – A modern homepage with hero banners, call-to-action sections, testimonials, pricing, etc. (for marketing the app).
  • User Authentication Pages – Dedicated login/register forms (and related pages like password reset, lock screen).
  • User Profile Page – A detailed profile with avatar, bio, contact info, skill tags, etc.
  • Social Feed or Blog Layout – A feed of posts/updates or blog articles (with comments, likes, etc.) similar to a LinkedIn news feed.
  • Messaging or Chat Interface – UI for real-time conversations or an activity log/notifications center.
  • Admin Dashboard – An internal dashboard for administrators, including charts, tables, user management lists, etc.
  • Navigation UI – Professional navbars (top and/or side menus) and footers that are consistent across pages.

Each selected template provides a strong design example for these features, ensuring they can be transferred to MudBlazor (which offers analogous components for layouts, cards, forms, nav menus, etc.). Below is the curated list of templates with their relevant features:

Template Recommendations

1. Hyper – Admin & Dashboard Template (Bootstrap 5) by Coderthemes

(Hyper - Angular 19 Admin & Dashboard Template by Coderthemes) Hyper's dashboard UI – showing cards, charts, and a sidebar navigation.
Hyper (Hyper - Responsive Admin Dashboard Template) is a premium Bootstrap 5 template that packs multiple demo layouts and a full spectrum of pages/apps needed for a social/admin web app. Notably, Hyper includes a dedicated landing page (marketing one-pager) as well as a complete set of admin dashboard pages and form layouts (Hyper - Responsive Admin Dashboard Template). Key features and pages from Hyper:

  • Landing & Marketing: A polished landing page is provided out-of-the-box (accessible as a “Landing” demo), featuring hero sections and product highlights. This can guide the MudBlazor implementation of a homepage with MudBlazor’s grid, cards, and typography for marketing content.
  • Auth Pages: Multiple pre-built login and sign-up pages (including variants) are included (Hyper - Responsive Admin Dashboard Template), which can be replicated using MudBlazor’s MudCard, MudTextField, and MudButton within a MudForm.
  • User Profile: A profile page layout is provided (with user info, avatar, etc.) (Hyper - Responsive Admin Dashboard Template). In MudBlazor, this could be built using MudGrid or MudPaper to arrange an MudAvatar alongside profile fields and sections (e.g. tabs for “About”, “Posts”, “Connections”).
  • Social Feed & Chat: Hyper uniquely offers a “Social Feed” page for activity/news feeds and a built-in Chat application (Hyper - Angular 19 Admin & Dashboard Template by Coderthemes). These illustrate how to design feed cards (which can map to MudCard components for each post in MudBlazor) and messaging UIs (e.g. a list of conversations using MudList and chat bubbles using MudPaper or MudContainer styling).
  • Admin Dashboard: Rich dashboard pages with analytics cards, charts, and tables are a core part of Hyper. It comes with sample data charts (Chart.js, etc.) and tables (Hyper - Angular 19 Admin & Dashboard Template by Coderthemes) (Hyper - Angular 19 Admin & Dashboard Template by Coderthemes). In MudBlazor, charts can be implemented with MudChart (for simple cases) or by integrating third-party chart libraries, and tables can be re-created with MudTable (supporting sorting, paging like the template’s tables).
  • Other Apps/Pages: Hyper’s bundle covers project management pages, task boards, file manager, calendar, invoice templates, pricing page, FAQ, timeline, error pages, etc. (Hyper - Angular 19 Admin & Dashboard Template by Coderthemes) (Hyper - Angular 19 Admin & Dashboard Template by Coderthemes) – all of which can be reproduced in MudBlazor using appropriate components (MudTable for lists, MudTimeline or manual for timeline, etc.).

Mapping to MudBlazor: Hyper’s overall structure (a top navbar + collapsible sidebar navigation) is directly mappable to MudBlazor’s Layout system: use MudAppBar for the top bar and MudDrawer for the sidebar (with MudNavMenu and MudNavLink for menu items). The card-based content translates to MudPaper/MudCard components. Forms (login, etc.) become MudForm with MudTextField controls. The chat and feed pages in Hyper demonstrate UI patterns that MudBlazor can emulate by combining list components, avatars, and typographic elements. In short, all of Hyper’s UI elements have MudBlazor equivalents, making it an excellent template for inspiration.

Official Demo Links: Hyper (Live Preview & Pages) – [Coderthemes Demo][77] (Hyper - Responsive Admin Dashboard Template) (features inbuilt apps like Projects, E-commerce, Profile, etc.)

2. Velzon – Multi-Purpose Bootstrap 5 WebApp Template by Themesbrand

Velzon (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum) is a mega-template that offers multiple dashboard demos and landing pages in one package. It’s designed as a one-stop solution for apps ranging from CRMs and Project Management to social platforms. Velzon comes with 165+ pre-built pages and 12+ integrated applications covering all the needed functionality (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum) (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum):

  • Multiple Landing Pages: Velzon includes several landing page variations (for different domains like SaaS, Crypto, Job Portal, etc.) (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum). These can guide the MudBlazor landing page design – e.g. using MudBlazor’s MudGrid and MudCarousel to implement hero sections and using MudPaper blocks for features/testimonials sections.
  • Authentication & User Management: Standard login/register pages and even extra flows (lock screen, OTP verification, etc.) are provided, similar to Hyper. These can be mapped to MudBlazor forms and dialogs. Velzon also has user management list pages and account settings pages in its admin section (e.g. profile settings) (Profile Settings | Velzon - Admin & Dashboard Template), which MudBlazor can reproduce with forms and tabs (MudTabs for settings sections like Profile, Security, Notifications).
  • Profile & Social Pages: The template features profile page layouts (example: Profile Detail and Profile Settings pages) (Profile | Velzon - Admin & Dashboard Template - Themesbrand), and while Velzon is more enterprise-focused, it includes timeline/activity components and contacts list pages that mimic social network interactions. MudBlazor’s MudTimeline (or manual timeline using cards) can help implement activity feeds; MudAvatar and lists will help show followers/connections.
  • Messaging and Notifications: A fully styled Chat application is part of Velzon’s 12+ apps (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum), providing design cues for a MudBlazor-based chat (using MudDrawer or MudContainer for the chat window and message threads in MudList). There are also support ticket pages which mirror messaging UIs.
  • Admin & Analytics: Velzon’s dashboards span Analytics, CRM, eCommerce, Crypto, Project Management, Support, NFT and more (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum), each with charts (ApexCharts, etc.), statistics widgets, and tables. All of these elements can be implemented with MudBlazor’s chart components or wrapped JS charts, MudProgress bars for stats, and MudTable for data grids.
  • Components & Utilities: Velzon provides a huge array of UI components (forms, modals, notifications, etc.). MudBlazor covers these with its component library (e.g. MudAlert for alerts, MudDialog for modals, MudSnackbar for toasts, etc.), so any UI element seen in Velzon can be mapped to a MudBlazor counterpart easily.

Mapping to MudBlazor: Velzon’s strength is in its breadth – it essentially shows how to design any page you might need. A strategy for using Velzon as a guide is to pick the relevant pages (e.g. use the CRM dashboard layout for your admin home, the social profile page for user profiles, the landing page for marketing) and rebuild them with MudBlazor. The MudBlazor Grid and Flex utilities will help structure complex page layouts as seen in Velzon. Navigation wise, MudBlazor’s drawer+appbar layout applies as with Hyper. Where Velzon uses advanced Bootstrap JS plugins (e.g. wizards, calendars), MudBlazor often has an equivalent (e.g. MudStepper for wizards, or you can embed a JS calendar if needed). Overall, Velzon ensures no feature is missing – you can confidently recreate the design in MudBlazor knowing the template’s UX has proven patterns (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum) (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum).

Official Source: Velzon on Themeforest (by Themesbrand) – Features 6 dashboards, 12+ apps (Calendar, Chat, Mailbox, etc.), and multiple Landing Pages (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum) (Velzon - Admin & Dashboard Template - Updates | Babiato Forums | Best Webmaster Forum). (The template’s docs/demos provide full HTML for all components, which can be translated into MudBlazor Razor components.)

3. Vuexy – VueJS/HTML Admin & Dashboard Template by Pixinvent

Vuexy is a popular admin template that comes in various flavors (HTML, Vue.js, React, etc.). Here we refer to the Bootstrap 5 HTML version of Vuexy (Vuexy - Admin Dashboard - Made with Vue.js). It is a feature-packed template with a mix of admin and app UI components, and even includes a front-facing landing page in the HTML package. Key relevant features:

  • Landing Page & Pricing: Unusually for an admin theme, Vuexy’s HTML version includes a landing page demo (Demo: Landing Page - Front Pages | Vuexy - Bootstrap Dashboard PRO) with marketing content (“One dashboard to manage all your businesses…”). It also offers ancillary pages like Pricing, FAQ, Contact on the front-end (Demo: Landing Page - Front Pages | Vuexy - Bootstrap Dashboard PRO). This provides a direct blueprint for MudBlazor’s landing page; one can use MudSections (MudBlazor’s grid/section patterns) to create similar feature highlights and MudCarousel or image components for client logos/testimonials.
  • Auth Pages: Vuexy includes multiple styled auth pages – Login/Registration (with “Basic”, “Cover”, and even multi-step register variants) (Demo: Landing Page - Front Pages | Vuexy - Bootstrap Dashboard PRO). Using MudBlazor, these can be implemented with different layouts (e.g. a full-screen background using CSS for “cover” style and a centered MudCard for the form).
  • User Profile & Pages: Vuexy provides pages like User List, User View, and Edit (in admin) and also a Profile page in the app section (Profile - Vuexy - Bootstrap HTML admin template) (Profile - Vuexy - Bootstrap HTML admin template). The Profile page design (with tabs for About, Photos, Friends) is very social-media-oriented. We can map this to MudBlazor using MudTabs (for About/Photos/Friends sections), inside which we use MudGrid to arrange profile picture (MudAvatar), user info, and cards for friends or photo gallery (MudBlazor has components to easily create image grids or just use Flex wrap).
  • Social Feed & Activity: While Vuexy focuses on apps, it has components for a timeline/activity feed and cards that can be used for a social news feed. (For example, the “Activity” widget or page can be repurposed as a feed.) MudBlazor can reproduce feed cards with MudPaper styling and use MudList or simple loops to generate a feed of posts.
  • Messaging and Apps: Vuexy comes with 10+ functional apps pages (Vuexy - Admin Dashboard - Made with Vue.js): including Email Inbox, Chat, Calendar, ToDo, Kanban Board, File Manager, and E-Commerce pages. The Chat app page is especially useful as a reference for a messaging UI design – you can mimic it in MudBlazor with a vertical MudList for contacts and another for messages, using avatars (MudAvatar) and message text in list items. The Email page shows a three-pane layout (list of emails, preview, etc.) which can be built using MudBlazor’s MudSplitter (resizable panels) or Grid.
  • Admin Dashboard & Analytics: As an admin template, Vuexy has multiple dashboards (Sales, Analytics, etc.) and lots of UI components for charts (e.g. Chartist/Charts.js integration), data tables, and stats cards. In MudBlazor, implement stats cards with MudPaper and icons, data tables with MudTable or MudDataGrid (if using a community package for richer tables), and charts either with MudChart or by embedding chart libraries (MudBlazor allows JS interop for advanced charts).
  • UI Elements: It also includes advanced UI features like a floating navbar, bookmarking system, search (Vuexy - Admin Dashboard - Made with Vue.js), etc., which are more template-specific niceties. MudBlazor provides a MudPopover and MudMenu which can help build similar user menus or bookmark dropdowns if needed.

Mapping to MudBlazor: Vuexy’s design is clean and modern, and MudBlazor’s Material look can be themed to match it (MudBlazor allows custom themes to adjust colors to resemble Vuexy’s palette). The navigation bar in Vuexy (top nav for user menu + a side menu for app navigation) can be done with MudAppBar + MudDrawer (similar to others). Many of Vuexy’s apps (chat, todo, etc.) are directly reproducible: e.g., Kanban board can be built with MudBlazor’s drag-drop (though MudBlazor doesn’t have built-in drag-drop, one could use HTML5 drag events or a small JS library integrated for that). The key is that Vuexy demonstrates a scalable structure: a consistent header, a collapsible sidebar, content area with varying layouts – which MudBlazor’s layout components can mirror. Each functional page from Vuexy can guide MudBlazor component usage (for instance, their **“User List” page can be recreated with a MudTable listing users, and their “User Profile” page with MudTabs as noted). By following Vuexy’s UX, you ensure your MudBlazor app covers both the admin needs and the social features in a cohesive style (Vuexy - Admin Dashboard - Made with Vue.js).

Official Demo: Vuexy (Bootstrap 5 HTML) – Multiple dashboards and 10+ apps (Calendar, E-commerce, Email, Chat, etc.) included (Vuexy - Admin Dashboard - Made with Vue.js). (Pixinvent provides an online demo where you can see the landing page and each app page in action, which can be emulated in MudBlazor.)

4. SocialV – Social Network & Community Admin Template by IQONIC

SocialV (SocialV v2.0 - Vue Js, HTML Social Network & Community Admin Template - NullJungle) is a template specifically geared towards social networks and communities, making it highly relevant for the LinkedIn-like aspects of our project. It provides a clean, minimal UI for social interactions and includes a set of 59+ inner pages covering community features. Key highlights:

  • Social Feed & Timeline: SocialV was literally designed as a “Facebook/LinkedIn clone” template (as evident from its tags and description) (SocialV v2.0 - Vue Js, HTML Social Network & Community Admin Template - NullJungle) (SocialV v2.0 - Vue Js, HTML Social Network & Community Admin Template - NullJungle). It comes with pre-built pages for News Feed/Timeline where user posts are listed with comments, likes, and share actions. This can directly inform the MudBlazor implementation of a feed: using MudCard for each post (header with user avatar/name, body with post content, footer with action buttons). MudBlazor’s MudIconButton can be used for like/share icons, and lists or repeaters for comments.
  • User Profiles & Connections: The template has multiple profile page variations (for viewing others, editing your own profile, etc.), and likely pages for friends/connection lists and groups/community pages. In MudBlazor, profile details can be shown with an avatar and text (using MudText and lists for things like interests or connections). A connections page can be a simple grid of user cards (MudPaper components with each friend’s photo and name).
  • Messaging & Notifications: SocialV includes a messages/chat page and possibly a notifications dropdown design. Since MudBlazor has a MudMenu and MudList, one can create a small notifications list in a menu, and a full messaging page similar to earlier templates (list of chats + chat window).
  • Main Dashboard (Admin): Although primarily social, SocialV calls itself also an “admin template” – it likely has an admin dashboard for community managers (with stats like new users, posts, etc.). This could be simpler than the full admin templates above, but it covers basics like user tables and analytics. Those can be implemented with MudBlazor tables and charts as needed.
  • Landing Page & Sign-up: SocialV being a niche template might not have a marketing landing page for the product (since it’s meant to be the product UI). However, it does include main pages for login, register, and perhaps a front welcome page. The sign-up workflow could also include profile completion steps. In MudBlazor, we’d implement these using forms and maybe MudStepper if a multi-step onboarding is needed.
  • Community-specific UI elements: Things like user badges, group cards, story/profile photo reels, reaction icons are part of SocialV’s design language. While MudBlazor doesn’t have “reaction” components out of the box, we can easily use MudIcon (with font-awesome or material icons) for like/thumbs-up icons that change color on click, etc. Group cards or story circles can be built with MudAvatarGroup or simply styled images inside MudBlazor grid.

SocialV’s design ethos (“clean and modern” (SocialV v2.0 - Vue Js, HTML Social Network & Community Admin Template - NullJungle)) can complement MudBlazor’s Material design by adjusting theme colors to the template’s light palette. Using SocialV as a reference ensures the social components of the app feel engaging and familiar to users of social media. Combined with one of the admin templates above (for the backend interface), it covers the LinkedIn-like functionality thoroughly.

Official Reference: “SocialV is a minimal, clean and modern Social Network and Community dashboard template with ready to use pages…” (SocialV v2.0 - Vue Js, HTML Social Network & Community Admin Template - NullJungle). It’s marketed for building a social platform (the tag list includes facebook clone, LinkedIn, news feed timeline (SocialV v2.0 - Vue Js, HTML Social Network & Community Admin Template - NullJungle)), making it an ideal UI kit to model the social aspects of your MudBlazor app. (The template’s demos showcase profile timelines, friends pages, and other community features.)

5. Tabler – Free Bootstrap 5 Admin & Webapp UI Kit (Open Source)

Tabler (Tabler Admin Template: Responsive HTML Dashboard with Clean UI) is an open-source Bootstrap 5 template that provides a high-quality UI toolkit with a ton of pre-built components and pages. It’s free (MIT licensed) and offers a great foundation for both admin and basic social/landing pages. Notable features relevant to our needs:

Mapping to MudBlazor: Using Tabler as a guide, you would map each UI element to MudBlazor:

  • Navigation bar and sidebar -> MudAppBar + MudDrawer (with MudNavLink items).
  • Cards, lists, avatars as in Tabler -> MudCard, MudList, MudAvatar (MudBlazor’s Avatar can even show status dots or initials, similar to Tabler’s user cards).
  • Forms -> MudBlazor form components (which align well since Tabler is Bootstrap 5 based, MudBlazor has analogous form controls).
  • Modal dialogs, popovers -> MudDialog, MudMenu etc.
    Because Tabler is built on Bootstrap 5, many of its design elements (spacing, flex utilities) have direct equivalents in MudBlazor’s utility classes or can be done with CSS in MudBlazor. Essentially, Tabler provides the blueprint, MudBlazor provides the building blocks.

Official Source: Tabler (Bootstrap 5 UI Kit) – “free and open source… with hundreds of responsive components and multiple layouts” (Tabler Admin Template: Responsive HTML Dashboard with Clean UI). The Tabler documentation and demo pages (Tabler v1.0.0 Is Here! Say Hello to Your New Favorite UI Toolkit - Tabler Blog) showcase the pre-built pages (Chat, FAQ, etc.), which can be recreated in MudBlazor for your application.

Mapping Bootstrap UI/UX to MudBlazor Components

Finally, to summarize the UI mapping from these Bootstrap templates to MudBlazor:

  • Overall Layout: All templates use a top navigation (or header) and sidebar. In MudBlazor, use a Layout with MudDrawer for the sidebar menu and a MudAppBar for the top bar. This corresponds to Bootstrap’s fixed sidebar + navbar. MudBlazor’s Drawer supports clipped or floating drawer modes to mimic collapsible sidebars.
  • Navigation Items: Bootstrap navbars and dropdowns can be implemented using MudNavMenu, MudNavLink for side menu items (with icons similar to <i class="..."> in Bootstrap, but MudBlazor uses MudIcon or icon names directly), and MudMenu for dropdown menus (e.g. user profile menu in the header).
  • Grid System: Where templates use Bootstrap’s grid (rows and columns) for layout, MudBlazor offers MudGrid and MudItem components (which function similarly using CSS grid/flex) or you can use Flex utilities (d-flex equivalent classes are built into MudBlazor or achievable via CSS/typography classes).
  • Cards & Content Containers: All templates rely heavily on cards/panels (Bootstrap’s .card). MudBlazor’s MudCard (with MudCardHeader, MudCardContent, MudCardActions) is directly analogous and should be used for any content box with a title and body (e.g. user profile info card, post in feed, stat widgets). For simpler containers, MudPaper provides a lightweight div with applied theme colors (useful for grouping content sections).
  • Forms and Input Controls: Bootstrap forms (input groups, checkboxes, switches) -> MudBlazor has a rich set of form controls: MudTextField, MudSelect, MudCheckbox, MudSwitch, etc., which can replace their Bootstrap counterparts. Layout-wise, MudBlazor forms can use MudForm for validation grouping and regular HTML <div> or MudItem to align fields, since MudBlazor doesn’t enforce a form grid like Bootstrap but you can achieve the same with columns or MudGrid. MudBlazor components also support validation attributes, so you can replicate login/register validation from the templates.
  • Buttons and Icons: MudBlazor’s MudButton can implement all Bootstrap button styles (it has color variants and can be set to outlined or text). Use MudIconButton for icon-only buttons (like a “like” or “settings” icon). MudBlazor uses Material Icons by default, but you can also use FontAwesome or custom SVGs if the template’s icons differ (MudIcon allows specifying icon by name or SVG). For example, the social share icons in a feed could be Material “thumb_up” or FontAwesome “fa-thumbs-up” icons inside MudIconButtons.
  • Tables and Lists: Admin templates often use <table> for data and <ul> lists for things like activity items. Data tables in MudBlazor are handled by MudTable which supports styling, paging, filtering – you can style it to look like Bootstrap’s tables (striped, hoverable). For simpler lists (like a list of notifications or messages), use MudList and MudListItem, which give you list styling and allow adding avatars or icons in them (via ChildContent). This maps well to any sidebar menu lists or drop-down item lists from the templates.
  • Charts and Graphs: The templates use JS libraries (ApexCharts, Chart.js, etc.). MudBlazor has a basic MudChart for line, bar, pie, etc., which can cover simple needs (like showing a revenue line chart or a user signups bar chart as in admin dashboards). For more complex charts (e.g. multiple series or advanced chart types), you might integrate a Blazor chart library or use JS interop to embed the same library used in the template. The layout for charts (cards containing a chart and a header) remains the same; just the implementation differs.
  • Modal Dialogs & Popovers: Bootstrap’s modals = MudDialog in MudBlazor. You can create confirmation dialogs, forms in dialogs, etc., easily and style them to match. Bootstrap tooltips/popovers = MudTooltip and MudPopover in MudBlazor. For example, a user’s name hover tooltip or a small popup on click can be done with these.
  • Notifications & Snackbar: Where templates might use Toast notifications (e.g. a small alert that a message was sent), MudBlazor provides MudSnackbar service to show transient messages. This can be triggered in code (like on form submit success) to mimic the template’s JS toasts.
  • Tabs and Accordion: Many profile pages or settings pages in templates use tabs (for different sections) – MudBlazor’s MudTabs with MudTabPanel will replicate that. Accordions (collapsible panels) are MudExpansionPanels in MudBlazor.
  • Timeline/Feed: If using a timeline style (Velzon/Hyper have timeline pages), MudBlazor doesn’t have a dedicated timeline component (aside from a simple vertical stepper), but you can manually create one with a vertical MudGrid and some custom CSS for connectors, or simply use a list of cards sorted by date (which often is just as effective as a “timeline”). For a LinkedIn-like feed, a column of stacked MudCards with maybe a subtle divider is a straightforward approach.
  • Material vs. Bootstrap Aesthetics: One thing to note is MudBlazor’s default styling is Material Design (e.g. more flat design, bold colors). Bootstrap templates might have different stylistic choices (shadows, border radii, etc.). Fortunately, MudBlazor is quite customizable via theme provider – you can adjust border radius, default colors, shadows to closer match the template’s style. Also, MudBlazor components accept CSS classes and style attributes, so you can apply custom CSS to, say, make a MudCard look like the template’s card (maybe a lighter shadow or border). Essentially, the UX structure (layout and component usage) is independent of the exact styling, which you can tweak in MudBlazor to approximate the Bootstrap theme’s look.

By using the above templates as references and mapping their UI elements to MudBlazor components, you can implement a cohesive web application that has: a marketing landing page, a full suite of social features (profiles, feed, messaging), and an admin dashboard – all within MudBlazor’s framework. Each template brings design patterns you can mix: for instance, you might use Hyper or Velzon for the admin and general UI, and SocialV’s ideas for the social feed and profile sections, achieving the LinkedIn-like experience with MudBlazor components on the front-end and maintaining consistency in design.

Sources and Demos: