Blazorise Ant Design Usage

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

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.

Step 1: Download Blazorise from NuGet

First step is to install a AntDesign provider for Blazorise:

Install-Package Blazorise.AntDesign

You also need to install the icon package:

Install-Package Blazorise.Icons.FontAwesome

Step 2: 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:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css" integrity="sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=" 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" />

Note: Don't forget to remove bootstrap JS and CSS files that comes with the default Blazor project template.

Step 3. Define Usings

In your main _Imports.razor add:

@using Blazorise

Step 4. Register Blazorise Services

Add the following lines to the relevant sections of Program.cs.

using Blazorise;
using Blazorise.AntDesign;
using Blazorise.Icons.FontAwesome;

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

Step 5. PWA & Offline Support (optional)

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