Ant Design of Blazor

Following the Ant Design specification, we developed a Blazor Components library ant-design-blazor that contains a set of high quality components and demos for building rich, interactive user interfaces.

</div> <style> .pic-plus > * { display: inline-block !important; vertical-align: middle; } .pic-plus span { font-size: 30px; color: #aaa; margin: 0 20px; } </style>

✨ Features

🌈 Enterprise-class UI interactive language and visual style.
📦 A set of high-quality Blazor components out of the box.
💕 Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
🎨 Supports Progressive Web Applications (PWA).
🛡 Build with C#, a multi-paradigm static language for an efficient development experience.
🌍 Internationalization support for dozens of languages.
🎁 Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.

🌈 Online Examples

WebAssembly static hosting on:

🖥 Environment Support

Supports .NET Core 3.1 / .NET 5 / .NET 6 / .Net 7 / .NET 8 / .NET 9.
Supports WebAssembly static file deployment.
Supports 4 major browsers engines, and Internet Explorer 11+ (Blazor Server only)
Supports .NET MAUI / WPF / Windows Forms and other Blazor Hybrid workloads.
Supports Electron and other Web standards-based environments.

Due to WebAssembly restriction, Blazor WebAssembly doesn't support IE browser, but Blazor Server supports IE 11† with additional polyfills. See official documentation.

From .NET 5, IE 11 is no longer officially supported. See Blazor: Updated browser support. Unofficial support is provided by Blazor.Polyfill community project.

💿 Current Version

Release:
Nightly:

Download our latest nightly builds

🎨 Design Specification

Regularly synchronize with Official Ant Design specifications, you can check the sync logs online.

Before the 1.0 release, we will only sync antd 4.x styles.

📦 Installation Guide

Prerequirement

Install .NET Core SDK 3.1.300 or later, .NET 8 is even better.

Option 1: Create a new project from the dotnet new template

We have provided the dotnet new template to create a Boilerplate project out of the box：

Install the template

bash

$ dotnet new --install AntDesign.Templates

Create the Boilerplate project with the template
bash
```
$ dotnet new antdesign -o MyAntDesignApp
```

Options for the template：

Options	Description	Type	Default
`-f` \| `--full`	If specified, generates all pages of ant design pro	bool	false
`-ho` \| `--host`	Specify the hosting model	'webapp' \| 'wasm' \| 'server'	'webapp'
`--styles`	Whether use NodeJS and Less to compile your custom themes.	`css` \| `less`	`css`
`--no-restore`	If specified, skips the automatic restore of the project on create	bool	false

Option 2: Import Ant Design Blazor into an existing project

Go to the project folder of the application and install the Nuget package reference
bash
```
$ dotnet add package AntDesign
```
Register the services in Program.cs
csharp
```
builder.Services.AddAntDesign();
```
or Startup.cs
csharp
```
services.AddAntDesign();
```
Add namespace in _Imports.razor
csharp
```
@using AntDesign
```

To display the pop-up component dynamically, you need to add the <AntContainer /> component in App.razor.

For Blazor WebApp, you also need to specify render mode to <Routes /> for interactivity.

diff

<Routes @rendermode="RenderMode.InteractiveAuto" />            <-- specify the rendermode ✨
+ <AntContainer @rendermode="RenderMode.InteractiveAuto" />    <-- add this component ✨

For legacy blazor apps just add a line of code:

<Router AppAssembly="@typeof(MainLayout).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <Result Status="404" />
        </LayoutView>
    </NotFound>
</Router>

<AntContainer />   <-- add this component ✨

Finally, it can be referenced in the `.razor' component!
html
```
<Button Type="ButtonType.Primary">Hello World!</Button>
```

🔨 Development

Gitpod

Click the button below to start a new workspace for development for free.

Local

Install .NET Core SDK 9.0.100 or later.
Install Node.js (only for building style files and interoperable TypeScript files)

Clone to local development