This repository contains a step-by-step demo project showing how to build a Blazor application using Microsoft FluentUI Blazor v5.
The code is explained during the .NET Live video session available on YouTube: youtube.com/live/CRVLURJjFBk.
Each step is stored on its own Git branch, so you can checkout any branch to see the project state at that point in the tutorial.
The demo lives in the DemoFluentUI folder and targets .NET 10 with Microsoft.FluentUI.AspNetCore.Components v5.
Update (September 2026): the final v5 release of Fluent UI Blazor is now published on NuGet, so the package commands can be simplified and no longer require the preview feed:
dotnet add package Microsoft.FluentUI.AspNetCore.Components dotnet add package Microsoft.FluentUI.AspNetCore.Components.Charts
To run the project:
cd DemoFluentUI
dotnet runThe following branches walk through the project, one feature at a time.
| # | Step | Branch |
|---|---|---|
| 01 | Empty Blazor project | steps/01-empty-blazor |
| 02 | FluentUI installation | steps/02-installation |
| 03 | Layout | steps/03-layout |
| 04 | Basic components | steps/04-basic-components |
| 05 | List | steps/05-list |
| 06 | Dialog | steps/06-dialog |
| 07 | File input | steps/07-fileinput |
| 08 | Default values | steps/08-default-values |
| 09 | DataGrid | steps/09-datagrid |
| 10 | Theme | steps/10-theme |
| 11 | Charts | steps/11-charts |
To switch to a specific step:
git checkout steps/03-layoutSee LICENSE.