🌈 A set of enterprise-class UI components based on Ant Design and Blazor.
Get Started
$ dotnet add package AntDesignReadme
Ant Design Blazor
A rich set of enterprise-class UI components based on Ant Design and Blazor.
🌈 A set of enterprise-class UI components based on Ant Design and Blazor.
$ dotnet add package AntDesign
A rich set of enterprise-class UI components based on Ant Design and Blazor.
English | 简体中文
WebAssembly static hosting examples:
 Edge / IE |  Firefox |  Chrome |  Safari |  Opera |  Electron |
|---|---|---|---|---|---|
| Edge 16 / IE 11† | 522 | 57 | 11 | 44 | Chromium 57 |
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.
Release:
Nightly:
Regularly synchronize with Official Ant Design specifications, you can check the sync logs online.
Therefore, you can use the custom theme styles of Ant Design directly.
We have provided the dotnet new template to create a Boilerplate project out of the box：
Install the template
$ dotnet new --install AntDesign.Templates
Create the Boilerplate project with the template
$ 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 | 'wasm' | 'server' | 'hosted' | 'wasm' |
--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 |
Go to the project folder of the application and install the Nuget package reference
$ dotnet add package AntDesign
Register the services in Program.cs (client-side WebAssembly Blazor)
builder.Services.AddAntDesign();
or Startup.cs (server-side Blazor)
services.AddAntDesign();
Link the static files in wwwroot/index.html (client-side WebAssembly Blazor) or Pages/_Host.cshtml (server-side Blazor)
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
Add namespace in _Imports.razor
@using AntDesign
To display the pop-up component dynamically, you need to add the <AntContainer /> component in App.razor.
<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!
<Button Type="@ButtonType.Primary">Hello World!</Button>
Click the button below to start a new workspace for development for free.
Install .NET Core SDK 7.0.100 or later.
Install Node.js (only for building style files and interoperable TypeScript files)
Clone to local development
$ git clone https://github.com/ant-design-blazor/ant-design-blazor.git
$ cd ant-design-blazor
$ npm install
$ dotnet build ./site/AntDesign.Docs.Build/AntDesign.Docs.Build.csproj
$ npm start
Visit https://localhost:5001 in your supported browser and check local development documentation for details.
Visual Studio 2022 is recommended for development.
Check out this issue to learn about our development plans for 2020.
If you would like to contribute, feel free to create a Pull Request, or give us Bug Report.
This project is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. We will use the proceeds for community operations and promotion. You can support us in any of the following ways:
We will put the detailed donation records on the backer list.
If you encounter any problems in the process, feel free to ask for help via following channels. We also encourage experienced users to help newcomers.
This project exists thanks to all the people who contribute.
This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the .NET Foundation Code of Conduct.
This project is supported by the .NET Foundation.
