Blazorise Ant Design Usage

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

Blazorise AntDesign is a provider for the Ant Design CSS framework. It includes provider styles, behavior, and Ant Design icons, so you don't need to download third-party Ant Design CSS files manually.

Ant Design is a design system developed by Alibaba. Blazorise Ant Design is an independent Blazor implementation inspired by Ant Design principles.

Note: Before proceeding, ensure you have already created a Blazor project. If not, the simplest way to start with Blazorise is by using our Templates.

👀 Want to see it in action? Check out the Ant Design Demo here !

Install Packages

First step is to install a AntDesign provider for Blazorise:

dotnet add package Blazorise.AntDesign

You also need to install the icon package:

dotnet add package Blazorise.Icons.AntDesign

Add Static Files

Blazorise Ant Design ships its stylesheet as a package static asset. Reference _content/Blazorise.AntDesign/antd.css instead of an external Ant Design CDN file.

Add these lines inside the <head> section:

<link href="_content/Blazorise.AntDesign/antd.css?v=2.4.1.0" rel="stylesheet" />
<link href="_content/Blazorise.Icons.AntDesign/blazorise.icons.antdesign.css?v=2.4.1.0" rel="stylesheet" />

<link href="_content/Blazorise/blazorise.css?v=2.4.1.0" rel="stylesheet" />
<link href="_content/Blazorise.AntDesign/blazorise.antdesign.css?v=2.4.1.0" rel="stylesheet" />

Update wwwroot/index.html.

Ant Design provider scripts such as bar.js, segmented.js, wave.js, modal.js, and tooltip.js are loaded by Blazorise when the related components need them. Add provider scripts manually only when following the PWA offline support guidance.

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

Add Imports

In your main _Imports.razor add:

@using Blazorise

Register Services

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

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

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

Offline Support

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