Blazorise Quick Start Guide

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

Blazorise is designed to work with different CSS frameworks. Each of the supported CSS framework is defined by a different NuGet package. Please see the usage page to find a list of supported frameworks and how to use them.

Note: Before continuing please make sure that you already have a Blazor project created. If not please go to the official Blazor website and learn how to create one.

Note: This documentation assumes you know the basics of Blazor. if you’re not comfortable with it yet, it’s probably not the best idea to learn from here as your first step — learn the basics, then come back. Blazor website is the best source for you to start.

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 provider for Blazorise:

Install-Package Blazorise.Bootstrap

You also need to install the icon package:

Install-Package Blazorise.Icons.FontAwesome

Add Static Files

The next step is to change your index.html or _Layout.cshtml / _Host.cshtml file and include the CSS and JS source files:

<html>
<head>
	<!-- inside of head section -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

	<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
	<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
</head>
<body>
	<div id="app"></div>

	<!-- inside of body section and after the div/app tag  -->
	<!-- These are the standard js dependencies this provider tipically dependes upon, but Blazorise deems these as optional as Blazorise Components should work correctly without these  -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</body>
</html>

Note: When Blazor project is created it will also include it’s own Bootstrap and FontAwesome files that can sometime be of older versions. To ensure we’re using the appropriate bootstrap and FontAwesome files, you need remove them or replace them with the links from above. If you forget to remove them it’s possible that some components will not work as expected.

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.Bootstrap;
using Blazorise.Icons.FontAwesome;

builder.Services
    .AddBlazorise( options =>
    {
        options.Immediate = true;
    } )
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();

PWA & Offline Support (optional)

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