Components for Blazor

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

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

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.Tailwind
- 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?v=1.1.4.0" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css?v=1.1.4.0" 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:

#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++;
    }
}

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

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

brhinescot/Blazorise