Element-Blazor: an Element Plus style component library for Blazor and .NET

El-prefixed Razor components, aligned to a design language

Element-Blazor is described in the README as a Blazor UI component library aligned with the Element Plus design language. The main line targets net10.0 and uses Razor components named with an El prefix, such as ElButton, ElInput and ElTable, so a .NET team can build a modern front end directly in Blazor. The choice of Element Plus as the reference is the interesting part of the positioning, because Element Plus is the Vue implementation of the Element design language, and a large body of Chinese enterprise design work is written against that vocabulary. Aligning to it means the interaction patterns a designer or a screenshot from a Vue admin panel translates into Blazor rather than into something bespoke. The alignment is not a claim of parity. The repository carries a separate document on Element Plus alignment, which is the right place to look for what is actually matched.

Four steps from package to first component

The quick start is short enough to follow without prior knowledge of the library. You add the main package with dotnet add package Element, then you register the services.

builder.Services.AddElementServices();

Next you load the static assets into your host page, three stylesheets and one script served from the static web assets path of the package.

<link rel="stylesheet" href="/_content/Element/css/fix.css" />
<link rel="stylesheet" href="/_content/Element/css/index.css" />
<link rel="stylesheet" href="/_content/Element/css/theme.css" />
<script src="/_content/Element/js/dom.js"></script>

And finally you use the components in markup.

<ElButton Type="@ButtonType.Primary">Primary</ElButton>
<ElInput TValue="string" Placeholder="Search" Clearable="true" />

Note the separate fix.css, index.css and theme.css files. That split is a hint about how the library is organised: a corrective layer, the main styles, and a theme layer you can swap.

Three packages for the core, markdown and AI components

The package table in the README is small and deliberate. The Element package is the Element-style Blazor component library and the one you install first. Element.Markdown is a Markdown editor component. Element.X is described as optional components for AI and conversation, and it corresponds to the Element Plus X style components. The project status section repeats the structure in source terms: the main project is src/Components/Element.csproj, the Markdown package is Element.Markdown, and the X package is Element.X at src/X/Element.X.csproj, with the target framework net10.0 and the current version line at 2.14.0-alpha.1. The X package is the newest and the least settled. The README says the roadmap has folded Element Plus X style components into long-term planning, with the goal of building AI conversation, sender, session list, thinking process, rich content and a RuoYi-style AI workbench demo using only the Blazor Element components in the current repository. The X package, the X project, and the separate package README files in the repository root reflect that the AI surface is being split out rather than folded into the core.

A build that needs submodules before it can be verified

Building the solution is two commands.

dotnet restore Element-Blazor.sln
dotnet build Element-Blazor.sln -c Release

But the README adds a caveat that will save you an hour if you skip it. The demo, template and community directories are submodules or display workspaces, and it says to initialize them before full validation.

git submodule sync --recursive
git submodule update --init --recursive

The repository root has a .gitmodules file, and the same three names appear as top-level entries alongside the source, docs, test, blazor-element-plus-admin, Dockerfile and docker-compose.yml. The Dockerfile and compose file point at the same thing from a different angle: the compose file runs an image called element-blazor on port 9000 mapped to 80 with a restart policy, and the Dockerfile builds a server-rendered sample from template/Samples/Renders/ServerRender in an SDK stage and copies the published output into an ASP.NET base image. That gives you a running reference implementation to compare against, which for a component library is the most useful test harness you can have.

Releases are driven by a tag and a NuGet key

The publishing process is described as a tag-driven pipeline. Creating a v* tag triggers the component publish workflow.

git tag v2.14.0-alpha.1
git push origin v2.14.0-alpha.1

The pipeline takes the version number with the leading v removed, packages Element, Element.Markdown and Element.X, publishes them to NuGet using the organisation secret NUGET_KEY, and creates a matching GitHub Release. That is a conventional and readable setup, and the fact that the tag is what drives it means a tag pushed with a typo becomes a published package. The release history shows v2.14.2 and v2.14.1 both on 2026-05-30, about two hours apart, with the last push to the repository on 2026-06-01. The documentation set is small and pointed: a changelog, a roadmap, a release checklist in the docs folder, the Element Plus alignment document, and a release template. The alignment document and the roadmap are the two files to read before you commit to the library, because they tell you what is finished and what is planned.

A Chinese-language project with an English README alongside

One practical thing to note before you start: the README you are reading is the Chinese one. The repository root holds README.md and README.en.md, so the English version exists and the content is roughly parallel, though the community sections point at a WeChat and WeCom group rather than a Discord or forum. The rest of the project is in the same shape. The licence is MIT, and the demo site is hosted on GitHub Pages at element-blazor.github.io, which is also where the component gallery lives. The repository is not archived and the last push was on 2026-06-01, and with the current version line at 2.14.0-alpha.1 you should read the changelog before pinning. There is also a .gitee directory at the root, a Chinese git hosting mirror, which is another marker of where the project's centre of gravity is.

Editorial conclusion

Element-Blazor fits a .NET team that wants the Element Plus look and behaviour inside a Blazor application without a JavaScript framework, and that is willing to follow an alpha line on net10.0. It does not fit a team on an older .NET version, since the target framework is net10.0, and it does not fit a project that needs Element Plus parity today, since the alignment is tracked in a dedicated document rather than guaranteed. Verify first that the component set covers what your screens need, read the Element Plus alignment document to see which behaviours are already matched, and check the changelog for the alpha you pin because the version line is 2.14.0-alpha.1.

Frequently asked questions

Official sources

1. Element-Blazor/Element-Blazor on GitHub
2. License: MIT
3. Project website
4. README
5. Releases