Blazorise Material 3 Usage Guide

Build modern Blazor apps with Blazorise Material 3 and customize the experience with Material design tokens.

Blazorise Material is a Material 3 focused provider. It ships with provider styles, behavior, and Material Symbols font files, so you no longer need to download third-party Material CSS files manually.

Material 3 Design is a design system from Google. Blazorise Material is an independent Blazor implementation inspired by Material 3 principles.

Installation Steps

1. Install the Material 3 provider: 
dotnet add package Blazorise.Material
2. Install the Material icons package: 
dotnet add package Blazorise.Icons.Material

Include Static Files

3. Add static file references in your app host file. The Material provider stylesheet loads its packaged Material Symbols fonts from _content/Blazorise.Material/fonts/. The Google Material Icons stylesheet is needed only when you use Blazorise.Icons.Material.

  • For WebAssembly, update index.html.
  • For Server, update _Layout.cshtml or _Host.cshtml.
  • For .NET 8, update App.razor.

Add the styles inside the <head> section, and place blazorise.material.js near the end of <body> before the Blazor script: 
<!-- In <head> -->
<!-- Required when using Blazorise.Icons.Material -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css?v=2.1.0.0" rel="stylesheet" />
<link href="_content/Blazorise.Material/blazorise.material.css?v=2.1.0.0" rel="stylesheet" />
<link href="_content/Blazorise.Icons.Material/blazorise.icons.material.css?v=2.1.0.0" rel="stylesheet" />

<!-- Before </body> (before the Blazor framework script) -->
<script src="_content/Blazorise.Material/blazorise.material.js?v=2.1.0.0"></script>

Add Imports

4. In your main _Imports.razor add: 
@using Blazorise

Register Services

5. Register Blazorise services in Program.cs: 
using Blazorise;
using Blazorise.Material;
using Blazorise.Icons.Material;

builder.Services
    .AddBlazorise( options =>
    {
        options.Immediate = true;
    } )
    .AddMaterialProviders()
    .AddMaterialIcons();

Customize Material Tokens

Material 3 theming is driven by CSS variables with a --mui- prefix. Override them in your own stylesheet loaded after _content/Blazorise.Material/blazorise.material.css.

Common tokens include --mui-primary, --mui-on-primary, --mui-surface, --mui-on-surface, --mui-outline, --mui-spacing, and --mui-font-family.

Example token overrides for global and dark mode theming: 
/* wwwroot/app.css (load after Blazorise Material CSS) */
:root {
    --mui-primary: #6750a4;
    --mui-on-primary: #ffffff;
    --mui-primary-container: #eaddff;
    --mui-on-primary-container: #21005d;
    --mui-surface: #fffbff;
    --mui-on-surface: #1c1b1f;
    --mui-outline: #79747e;
    --mui-spacing: 1rem;
    --mui-font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
    --mui-primary: #d0bcff;
    --mui-on-primary: #381e72;
    --mui-primary-container: #4f378b;
    --mui-on-primary-container: #eaddff;
    --mui-surface: #141218;
    --mui-on-surface: #e6e1e6;
    --mui-outline: #938f99;
}

You can also scope token overrides to a section of the app by applying them to a wrapper selector (for example, .my-feature-area) instead of :root.

PWA & Offline Support (optional)

For information about PWAs & offline support, please take a look at our PWA docs.

On this page