Blazorise Usage

Get started with Blazor and Blazorise in no time.

You can use any of the components as demonstrated in the documentation. Please refer to each component's page to see how they should be used.

Setup Guides for supported CSS Providers

We support multiple diferent CSS frameworks. To be able to use one of the please click one of the options bellow.

Components naming convention

Blazorise follows the ASP.NET Core Razor naming convention for components. See: ASP.NET Core Razor components

This means, that when you encounter a similar named Html and Blazorise component, the Blazorise component will be distinguished by the starting upper-case letter. For example:

  • HTML dropdown list : <select>...</select>
  • Blazorise dropdown list: <Select>...</Select>

Empty provider

Generally you will always want to use and register one of the provided CSS frameworks. But in the case that you only want to use any of the custom Blazorise extensions, like for example: Chart or Sidebar, you can register an “Empty” provider. This way the extensions will still work but the default Blazorise components will be unused.

public void ConfigureServices( IServiceCollection services )
{
  services
    .AddEmptyProviders();
}

Testing with bUnit

For testing purposes, there is currently an internal Blazorise Service that should be configured as Transient so the bUnit test engine does not throw an error. You should add this setup: ctx.Services.AddBlazorise().Replace(ServiceDescriptor.Transient<IComponentActivator, ComponentActivator>()); Other than that it should pretty much work out of the box. Let us know if you're having any difficulties. For some testing examples, you can look at some of our tests.

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:

PWA & Offline Support

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

On this page