Blazorise Fluent 2 Usage Guide

Quickly install Blazorise with Fluent 2 design system, one of the world's most popular Blazor UI framework.

Welcome to the quick start guide for integrating the Blazorise Fluent 2 design system into your Blazor applications. Blazorise is among the most popular UI frameworks for Blazor, and with the Fluent 2 provider, you can leverage the modern and intuitive design language of Microsoft's Fluent 2.

Installation Steps

1. Install Required Packages

To integrate Fluent 2 design with Blazorise, you need to install two NuGet packages:

Fluent 2 Provider for Blazorise: 
Install-Package Blazorise.FluentUI2
Fluent Icon Package for Blazorise: 
Install-Package Blazorise.Icons.FluentUI

2. Include Static Files

Modify your project's HTML template to include the necessary CSS files. The files you add depend on whether you're working with a WebAssembly or Server project:

  • For WebAssembly, update index.html.
  • For Server, update _Layout.cshtml or _Host.cshtml.
  • For .NET 8, update App.razor.

Add these lines inside the <head> section: 
<link href="_content/Blazorise.Icons.FluentUI/FluentSystemIcons-Resizable.css?v=1.8.2.0" rel="stylesheet" />

<link href="_content/Blazorise/blazorise.css?v=1.8.2.0" rel="stylesheet" />
<link href="_content/Blazorise.FluentUI2/reboot.css?v=1.8.2.0" rel="stylesheet" />
<link href="_content/Blazorise.FluentUI2/blazorise.fluentui2.css?v=1.8.2.0" rel="stylesheet" />

3. Update Imports

In the _Imports.razor file at the root of your project, add the following namespace declarations: 
@using Blazorise

4. Register Blazorise Services

Configure your Program.cs to register Blazorise services, including the Fluent 2 providers and icons: 
using Blazorise;
using Blazorise.FluentUI2;
using Blazorise.Icons.FluentUI;

builder.Services
    .AddBlazorise()
    .AddFluentUI2Providers()
    .AddFluentUIIcons();

Customizing the Theme

Blazorise exposes a powerful theming system based on CSS variables. You can override these tokens globally, or for specific sections of your app.

We’ve published a detailed blog post showing how to extend and customize Fluent UI theming in Blazorise.

Be sure to check it out if you want deeper customization, like changing brand colors or adjusting component spacing.

Switching to Dark Mode

Fluent UI tokens are already prepared for dark theme. To enable it, set the data-theme="dark" attribute on your <html> element: 
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <title>My Fluent UI App</title>
  </head>
  <body>
    <app>Loading...</app>
  </body>
</html>

That’s all it takes. Your entire Blazorise Fluent UI app will switch to dark mode.

Optional: PWA & Offline Support

To enhance your application with Progressive Web App (PWA) capabilities and offline support, refer to our PWA documentation. This step is optional but recommended for applications intended to offer a rich, offline-capable user experience.

On this page