Blazorise Quick Start Guide

Quickly install Blazorise, one of the world's most popular Blazor UI framework.

Blazorise is designed to work independently of CSS frameworks. Each of the supported CSS framework is defined by a different NuGet package for Blazorise. Please see the integration guide to find a list of supported frameworks and how to use them.

The setup process is similar for all of the supported CSS frameworks, you will just replace the Bootstrap sources with the ones you need.

Install Packages

First step is to install a Bootstrap 5 provider for Blazorise:
Install-Package Blazorise.Bootstrap5
You also need to install the icon package:
Install-Package Blazorise.Icons.FontAwesome

Add 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="" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />

Add Imports

In your main _Imports.razor add:
@using Blazorise

Register Services

Add the following lines to the relevant sections of Program.cs.
using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;

    .AddBlazorise( options =>
        options.Immediate = true;
    } )

PWA & Offline Support (optional)

For information about PWAs & offline support, please take a look at our PWA docs.

On this page