Components for Blazor

Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.

Note: Old documentation can be found at http://v094.blazorise.com/

Commercial support

Support for the Blazorise Components is available as part of the Blazorise Commercial subscription.

With the commercial license you get:

• Access to premium themes and templates
• Premium forum support
• Dedicated customer support with 24 or 16 hour response time
• Priority fixes and feature requests

Supporting Blazorise

Blazorise is an Apache 2.0-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers.

Special Sponsors

Demos

Blazor WebAssembly

• Bootstrap 4 Demo
• Bootstrap 5 Demo
• Material Demo
• Bulma Demo
• AntDesign Demo

Blazor Server

• Bootstrap Demo

Documentation

For full documentation, please visit the Blazorise official documentation page.

Continuing reading below for a quick start guide.

Prerequisites

Before you continue, please make sure you have the latest version of Visual Studio and .Net Core installed. Visit an official Blazor site to learn more.

Installations

There are currently 5 different NuGet packages for each of the supported CSS frameworks. Available packages are:

- Blazorise.Bootstrap
- Blazorise.Bootstrap5
- Blazorise.Bulma
- Blazorise.Material
- Blazorise.AntDesign

This guide will show you how to setup Blazorise with Bootstrap and FontAwesome icons. To setup Blazorise for other CSS frameworks, please refer the Usage page in the documentation.

1. NuGet packages

First step is to install a Bootstrap provider for Blazorise:

Install-Package Blazorise.Bootstrap

And FontAwesome icon package:

Install-Package Blazorise.Icons.FontAwesome

2. Source files

Add the following to index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server) in the head section.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

Add the following to index.html or _Host.cshtml in the body section.

<script src="https://code.jquery.com/jquery-3.5.1.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.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

Please note, that these are the Blazorise explicit dependencies, you still need to add framework specific dependencies.

2.1 JavaScript resources

Blazorise loads any additional JavaScript it needs dynamically once a component needs it. This means that Blazorise expects that the resources are available and placed relative to the app root. You can configure this by using the app.UseStaticFiles(); and it does not need any other additional configuration from your part. If you're having any difficulties, please refer to the following issues:

If you're having any difficulties, please refer to the following issues:

• #3122
• #3150

We are also aware that there might need to be extra setup when dealing with PWA and offline capabilities if you want your app to remain responsive. Please check our PWA docs for more information.

3. Using's

In your main _Imports.razor add:

@using Blazorise

4. Registrations

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();

Usage

@page "/counter"

<Heading Size="HeadingSize.Is1">Counter</Heading>

<Paragraph>Current count: @currentCount</Paragraph>

<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

Try Preview

If you're willing to try preview versions of Blazorise, all you need to do is set up Visual Studio to know how to use Blazorise MyGet feed feed. The easiest way to do this is to create NuGet.config file and place it into your solution root folder. Then you copy the following content and paste it to the NuGet.config.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="BlazoriseMyGet" value="https://www.myget.org/F/blazorise/api/v3/index.json" />
  </packageSources>
</configuration>

Now you will be able to get preview versions of Blazorise with the latest changes and bug fixes.