In the beginning of the year I discussed ways you can use Microsoft's Fluent Design System in your Blazor apps. The short recap is that there are basically three ways of integrating a Fluent Design System look in you Blazor app by using Fluent UI Web parts:

  1. Use the available React components  
  2. Use the Fluent UI Web components 
  3. Use the BlazorFluentUI packages 

Fast forward to present day and the deck is shuffled quite a bit. Just not for option 1 described above. That one is still as impractical as I described back then. How about the other two options?

BlazorFluentUI

Since writing the first article, I went from a casual contributor to the BlazorFluentUI repository to an actual maintainer. We released quite a few versions and made some significant progress on mimicing the Fluent UI React components. If you want to use a Fluent UI look in your Blazor application today, this is a certainly a valid option.

However...all the work on the library was done by just two maintaners and a few contributors. That proved not to be sufficient for keeping up with all the changes that are being done by the Microsoft Fluent UI React team. We have therefore decided to put the library in a 'maintenance mode'. A 6.0 version (using .NET 6) has been released and that will be the version people should/can use until at least .NET 7 will be released in November 2022. We might even decide to do an updated build on that version (but no promises!).

As said, the library is there, it is working, it is fairly complete and it is running on the latest .NET bits but no new functionality will be added.

Fluent UI Web Components

Now this is where all the action is happening!

As described in January, you needed to add the required JavaScript, add styling to the CSS and then you could start adding the native web components directly to to your Blazor pages and/or components. You could use normal Blazor event handling to interact with the web components programmatically. Things like binding were a bit harder. All doable but still a bit cumbersome.

In May I learned that the team at Microsoft building the Fluent UI Web Components together with the ASP.NET Blazor team were working on a official Blazor 'wrapper' for the Fluent UI Web Components! Back in those day it was still prety rudimental and things like binding were not working accross the board. I offered the team to help and to put my experience with BlazorFluentUI to work and became a member of the team.

I'm happy and excited to share that on November 8th, coinciding with the .NET 6 and Visual Studio 2022 release, Microsoft Fast Components FluentUI NuGet package version 1.0 has been released! The repository holds Blazor Server and Blazor WebAssembly demos and comes with an extensive set of controls to build beautiful Fluent web interfaces. One of the latest commits added the latest Windows 11 visual styles.

An offical online demo is in the works, but if you would like to see what is in the libary in the mean time, you can visit my copy of the WebAssembly demo at https://fluentui-blazor.baaijte.net/.

Work on adding more components to the Fluent Web Components library is underway. You can check the Fluent UI Web Components and FAST repositories to see what is coming. On the list right now are a calendar and a picker, but more are coming. Once new components are added to the Fluent UI Web Component implementation (which is a composition of the FAST library), they will be added to the Blazor library as well. Expect to see regular updates to the package! 

If you're having some trouble to understand the difference between Fluent UI Web Components and FAST, a good place to start is the official Microsoft Docs site for Fluent UI Web Components. In particular take a look at the FAQ.

Hope this helps and let me know if you are using the package.

Comments


Comments are closed