This file provides context and instructions for AI coding agents working on the Microsoft Fluent UI Blazor components library.
This is a .NET Blazor component library that provides Fluent UI design system components for Blazor applications. The library wraps Microsoft's official Fluent UI Web Components and provides additional components leveraging the Fluent Design System.
- Main Package:
Microsoft.FluentUI.AspNetCore.Components - Target Framework: .NET 8+
- License: MIT
- Language: C# with Razor components
- Documentation: https://www.fluentui-blazor.net
src/
├── Core/ # Main component library
├── Core.Scripts/ # TypeScript/JavaScript for web components
└── Extensions/ # Additional packages (EF adapter, OData, etc.)
tests/
├── Core/ # Unit tests (bUnit)
└── Integration/ # Integration tests
examples/
├── Demo/ # Demo application
└── Samples/ # Sample projects
- .NET 8 SDK or later
- Node.js 22.x (for Core.Scripts project)
- Visual Studio 2026 (recommended on Windows)
# Build the entire solution
dotnet build Microsoft.FluentUI-v5.slnx
# Build only the core component library
dotnet build src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj
# Build the demo application
dotnet build examples/Demo/FluentUI.Demo/FluentUI.Demo.csproj
# Clean the solution
dotnet clean Microsoft.FluentUI-v5.slnx
# Restore packages
dotnet restore Microsoft.FluentUI-v5.slnx# Run demo application
dotnet run --project examples/Demo/FluentUI.Demo/FluentUI.Demo.csproj
# Watch mode (hot reload)
dotnet watch run --project examples/Demo/FluentUI.Demo/FluentUI.Demo.csproj# Run all unit tests
dotnet test tests/Core/Components.Tests.csproj
# Run specific test
dotnet test tests/Core/Components.Tests.csproj --filter "FullyQualifiedName~TestClassName"- Tests use bUnit for Blazor component testing
- Tests use Verify for snapshot testing
- Test file naming:
{ComponentName}Tests.cs - Test method naming:
{MethodName}_{Scenario}_{ExpectedBehavior} - Always add or update tests when modifying components
- Run all tests before submitting a PR
Unit tests are in tests/Core/Components/ mirroring the component structure in src/Core/Components/.
- Nullable: Enabled (
<Nullable>enable</Nullable>) - Warnings as Errors: Enabled (
<TreatWarningsAsErrors>true</TreatWarningsAsErrors>) - Code Style: Enforced in build (
<EnforceCodeStyleInBuild>true</EnforceCodeStyleInBuild>) - Use C# latest language features
- Follow Microsoft C# coding conventions
- Components are in
src/Core/Components/ - Each component should have its own folder
- Include:
.razorfile,.razor.cscode-behind (if needed),.razor.cssstyles (if needed) - Expose design tokens for customization
- Ensure accessibility compliance
// Example component structure
public partial class FluentComponentName : FluentComponentBase
{
[Parameter]
public string? Property { get; set; }
[Parameter]
public EventCallback<T> OnEvent { get; set; }
}- Rebase your branch from the target branch (do NOT use
git merge) - Run all unit tests:
dotnet test tests/Core/Components.Tests.csproj - Ensure the build passes:
dotnet build Microsoft.FluentUI-v5.sln - Update documentation if needed
Follow Conventional Commits:
feat:- New featurefix:- Bug fixdocs:- Documentation changeschore:- Maintenance tasksrefactor:- Code refactoringtest:- Adding or updating tests
- Tests added/updated for changes
- Changes have been tested locally
- Documentation updated if needed
- Follows project coding standards
If you encounter NPM authentication issues (E401):
cd src/Core.Scripts
# Install vsts-npm-auth
npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
# Get authentication token
vsts-npm-auth -config .npmrc -force
# Install packages
npm installDirectory.Build.props- Central versioning and build configurationDirectory.Packages.props- Central package version management.github/CODEOWNERS- Code ownership (@vnbaaij @dvoituron)docs/contributing.md- Contribution guidelinesdocs/unit-tests.md- Detailed unit testing documentation
- Do not commit sensitive data or credentials
- Review the
SECURITY.mdfile for security policies - Report security vulnerabilities through proper channels (not public issues)
This repository uses a fork-based contribution model:
- Fork the repository from microsoft/fluentui-blazor
- Clone your fork locally
- Create a feature branch from the target branch (
dev) - Make changes and commit following conventional commit guidelines
- Push to your fork
- Create a Pull Request targeting the upstream repository
microsoft/fluentui-blazor
# Add upstream remote (if not already configured)
git remote add upstream https://github.com/microsoft/fluentui-blazor.git
# Fetch upstream changes
git fetch upstream
# Rebase your branch on upstream
git rebase upstream/dev