.NET Developers have a long history with component libraries.

If you’re not familiar with the concept, these are collections of components you can drop into your application when you want a certain bit of UI functionality for your app.

If you’re thinking tables, accordians and toggle buttons, you’re on the right track.

But why do such things exist? Why would you want to use a third party component in favour of “rolling your own”?

I can think of a few reasons.

CSS

I work with a couple of developers who “get” CSS. They seem to have an innate ability to create beautiful looking web applications; bending the browser to their will with a couple of well crafted lines.

I, on the other hand, can easily lose hours to a “simple bit of CSS”, fighting the syntax every step of the way, labouring to slay the CSS beast only to find it works perfectly on my Chrome desktop but resembles an early Geocities page when I view it on a mobile!

If component libraries can “do CSS” for me, I’m in…

Rapid prototyping

Even if you might want (or need) to write your own UI components, starting with a library can be a real time saver when it comes to spinning up a prototype or V1 of an application.

If you can drop a grid into your application, complete with paging, sorting, filtering etc. vs spending hours/days building one yourself, it’s got to be tempting to go with the first option (not least so you can focus on your business logic and flow).

Battle tested

All the big component libraries also have the benefit of being pretty well battle-tested.

Once a company like Telerik has released a few iterations of a grid component you’d imagine it will have gone through a hefty amount of testing (both internally and by customers) so it’s pretty low risk to use it in your own application (and you’d expect it to be cross browser compatible which is a significant time saver).

Exploring Blazor’s component libaries

So, if those are some of the benefits, what are the component library options for Blazor (as we move inexorably towards an official Blazor WASM release)?

The following list is almost certainly incomplete so feel free to hit me up on Twitter (@jonhilt) or leave a comment and point out everything I’ve missed!

Radzen Blazor Components

Radzen Blazor Components is a free set of 40+ native Blazor UI controls.

It includes all the basic form controls you’d hope (Date Pickers etc) along with data grids and containers such as accordians and tabs.

It doesn’t handle data visualisation e.g. charts.

SyncFusion Blazor UI Components

There are a number of component libraries which, on the face of it, seem “expensive” and SyncFusion is one of them.

Admittedly, value is in the eye of the bolder, and $995 a year might be peanuts compared to the productivity gains you’ll make as a reasonable sized company with more than a handful of developers.

However, it also pays to read the small print, and in this case they offer a community license based on you matching conditions laid out here.

Namely that you’re an individual or company with less than $1 million USD in annual gross revenue and 5 or fewer developers.

In terms of the components themselves, they have a comprehensive collection including small components such as Date Pickers all the way up to rich text editors, word processors and file managers.

Various options for data visualization are also included (charts etc).

MudBlazor

MudBlazor is “an ambitious Material Design component framework”.

If you’re looking for Date Pickers, Progress bars, Ratings etc. MudBlazor has your back and nearly all of the components use just C# (no javascript, except where it’s strictly necessary).

The vision for MudBlazor is to keep it clean, simple and with a highly customisable modern design. No javascript, just Blazor and CSS.

It’s the newest kid on the block (arrived in 2020) and is already shaping up to be a really solid component library.

MatBlazor

MatBlazor brings Material design to your Blazor projects.

The list of components is pretty extensive, including all the standard form inputs you’d expect, plus grids, cards and lots more besides.

You’ll also find DatePickers, AutoComplete lists to save you the hassle of implementing such things yourself.

It also boasts some super handy navigation components (things like nav menus, and “drawers” which your users can choose to show or hide).

Overall this is a really solid component library, in active development and you can’t beat the price!

Telerik UI for Blazor

Doesn’t boast quite so many components as SyncFusion, but has the basics covered with Date Pickers, Buttons, Grids etc.

Also includes various charts for data visualisation.

Some Blazor component libraries are actually wrappers around javascript components but Telerik’s approach is to build for native Blazor, aiming to use C# as much as possible and only adding JS Interop to the mix as a last resort (or if performance dictates).

Overall this should make for better integration with all aspect of Blazor (and a smaller JS file needing to be shipped to the browser to make everything work).

DevExpress Blazor Components

  • Site: https://www.devexpress.com/blazor/
  • Pricing: Free “for a limited time”
  • Server: Yes (I think) - couldn’t see this listed explicitly anywhere…
  • WASM: Yes (I think) - as above

DevExpress’s library is currently free. However, the big caveat here is in the wording which includes the sentence “for a limited time”, so it’s hard to know where they’ll go with pricing in the future.

In terms of the library itself, it includes essentials like Data Grids, Charts, and various Editors (date pickers etc).

Blazored libraries and components

This is a collection of GitHub repositories including various components such as Modals, Text Editors, Toast popups etc.

It offers some useful time savers such as Typeahead to offer up auto complete suggestions as you type into a text input.

Chris Sainty is behind this (I thoroughly recommend his excellent Blazor blog) and the code is all open source (available on GitHub).

Blazorise

Built on frameworks such as Bootstrap, Bulma and Material, Blazorise offers a decent number of components ready for you to drop into your Blazor apps.

You can use any of the free provided CSS frameworks, leaving you free to stick with Bootstrap if that’s what you generally use, or look at the alternatives (Bulma or Material).

Again the basics are all there (Editors, Buttons, Grids etc) and they have a Chart component to boot.

Next up

Is it possible to render components “dynamically” using Blazor?
Because life’s not complicated enough already!
Render Blazor WASM components in your existing MVC/Razor Pages applications
You can render individual Blazor WASM components in your existing Razor Pages (or MVC) Core app.
Prerendering your Blazor WASM application with .NET 5 (part 2 - solving the missing HttpClient problem)
If you refresh your prerendered Blazor WASM site today you’re in for a big surprise…