Awesome

Components for Blazor

Blazorise is the only Blazor component library offering development independent of CSS frameworks, exclusively using C#. It provides support for various frameworks including Bootstrap, Tailwind and Material.

Commercial usage

Blazorise, as a commercial product, offers a range of subscription plans that include premium support. When you choose a commercial license, you gain several advantages:

The benefits of the commercial licenses are:

• Access to Blazorise Themes.
• Access to Blazorise Blocks.
• Premium support via Blazorise Support forum.
• Dedicated customer support with swift response times of either 24 or 16 hours.
• Priority fixes and feature requests.

* Some features may be exclusive to specific subscription tiers.

Supporting Blazorise

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

Special Partners

Demos

Blazor WebAssembly

• Tailwind Demo
• Bootstrap 4 Demo
• Bootstrap 5 Demo
• Material Demo
• Bulma Demo
• AntDesign Demo
• Fluent 2 Demo

Blazor Server

• Bootstrap Demo

Documentation

For full documentation, with code samples and a detailed explanation of each component please visit the Blazorise official documentation pages.

Continuing reading below for a quick start guide.

Installations

Prerequisites

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

Available packages

There are currently 6 different NuGet packages for each of the supported CSS frameworks.

Available Blazorise packages are:

1. Blazorise.Tailwind
2. Blazorise.Bootstrap
3. Blazorise.Bootstrap5
4. Blazorise.Bulma
5. Blazorise.Material
6. Blazorise.AntDesign
7. Blazorise.FluentUI2

This guide will show you how to setup Blazorise with Bootstrap 5 and FontAwesome 6 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 5 provider for Blazorise:

dotnet add package Blazorise.Bootstrap5

And FontAwesome icon package:

dotnet add package Blazorise.Icons.FontAwesome

2. Source files

Add the following to index.html (Blazor WebAssembly), or _Host.cshtml (Blazor Server), or App.razor (.NET 8) in the head section.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

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

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:

• #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.Bootstrap5;
using Blazorise.Icons.FontAwesome;

builder.Services
  .AddBlazorise()
  .AddBootstrap5Providers()
  .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++;
    }
}

Development version

We release a development version of Blazorise on a regular basis. This version is available on the MyGet feed. This release is not recommended for production use, but it's a great way to test the latest features, bug fixes and gives us some feedback ahead of the upcoming release.

Contributing

We welcome contributions and any suggestions or feature requests you might have. Contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. This will be signed once you submit a PullRequest on our repository. For details about our CLA, please visit: Contributor License Agreement.

For our code conventions and guidelines please visit: Contributing Guide