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:

Install-Package Blazorise.AntDesign

You also need to install the icon package:

Install-Package Blazorise.Icons.AntDesign

Add Static Files

Modify your project's HTML template to include the necessary CSS files. Blazorise Ant Design ships the Ant Design stylesheet as a package static asset, so reference it from _content/Blazorise.AntDesign/antd.css instead of an external Ant Design CDN file. The host file you update depends on whether you're working with a WebAssembly or Server project:

For WebAssembly, update index.html.
For Server, update _Layout.cshtml or _Host.cshtml.
For .NET 8, update App.razor.

Add these lines inside the <head> section:

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

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

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();

PWA & Offline Support (optional)

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