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.
To update the NuGets using the Preview feed:
dotnet add package Microsoft.FluentUI.AspNetCore.Components -s https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet9/nuget/v3/index.json -v 5.0.0-preview.26154.1
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Charts -s https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet9/nuget/v3/index.json -v 5.0.0-preview.26154.1To 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.