BlazorM3.Standard 1.0.2

BlazorM3 Standard (Core)

A premier Material Design 3 (M3) component library for Blazor, built with fidelity, performance, and accessibility as first-class citizens. For full documentation and live demos, visit blazorm3.pages.dev. This Standard edition provides the essential structural foundations, theming engine, and core components required to build modern, responsive web applications following Google's latest design language.

🆕 Recent Updates (v1.0.0)

• Table Settings Key Unique Fix: Fixed a duplicate key exception in the visible columns list toggle settings menu when using multiple columns with the same property name (e.g. frozen vs. ref columns).
• AutoClose Navigation Fix: Fixed a circuit disconnect issue where passing string literals for AutoClose on M3NavigationDrawer/M3NavigationRail caused runtime casting exceptions.
• Release Candidate Alignment: Synchronized layouts, typography classes, and styles across templates and showcase sites.
• M3Toolbar Z-Index Elevation: Resolved overlay/stacking issues when menus or settings popups drop down over sticky table headers.
• File Download JS Helper: Added custom JavaScript interop helper (downloadFile) for triggering native file downloads from Blazor.

🚀 Quick Start

1. Install the Package

dotnet add package BlazorM3.Standard

2. Project Templates (Recommended)

The easiest way to start a new project is using our pre-configured Blazor WebAssembly template:

# Install the templates
dotnet new install BlazorM3.Templates

# Create a new project
dotnet new blazorm3app -n MyNewApp

3. Manual Registration

In your Program.cs:

using BlazorM3.Core.Extensions;

builder.Services.AddBlazorM3();

3. Add Static Assets

Add the following to your index.html or App.razor:

<link rel="stylesheet" href="_content/BlazorM3.Standard/css/root.css" />
<link rel="stylesheet" href="_content/BlazorM3.Standard/css/typography.css" />
<link rel="stylesheet" href="_content/BlazorM3.Standard/css/elevation.css" />
<link rel="stylesheet" href="_content/BlazorM3.Standard/css/shape.css" />
<link rel="stylesheet" href="_content/BlazorM3.Standard/css/state.css" />
<script src="_content/BlazorM3.Standard/js/blazor-m3.js"></script>

4. Enable Global Imports

Add the following to your _Imports.razor:

@using BlazorM3.Core.Components
@using BlazorM3.Core.Enums

✨ Features

• Design Tokens: Full implementation of MD3 color roles, typography scales, and elevation levels.
• Dynamic Theming: Support for light/dark mode and custom color seeds.
• Core Components:
  • Buttons (Filled, Tonal, Outlined, Elevated, Text)
  • Button Groups (Action, Single, Multi)
  • Icon Buttons
  • Cards (Elevated, Filled, Outlined)
  • Typography system
  • Navigation Drawer foundations
  • Sliders (Continuous and Discrete)
  • And more...

🛡️ License

Free for hobbyists and small businesses. Distributed under the MIT License. See LICENSE for more information.

Built with ❤️ by Arietta Solutions