With so many Blazor Component Libraries, which one is best for you?

You head into work on a cold, wet Monday morning.

No sooner have you set foot inside the building when your boss calls you over.

“I need you to add a ‘simple’ form to our Blazor app, and I need it by lunchtime”.

A few vague instructions later you reluctantly accept the assignment and head over to your desk.

Headphones on, you get to work.

To your surprise, you manage to get a form up and running within the hour (thank you EditForm!)

Another hour later you’ve hooked everything up to the backend (even managing to get some validation in there to prevent the usual user shenanigans).

Triumphant, you go back to your boss and show them what you’ve got.

Expecting to be showered with praise, perhaps rewarded with an early lunch, you’re dismayed when the boss takes a cursory glance and says…

“Date of Birth needs to be a date picker”

Build your own?

With only an hour to spare you simply don’t have the time to build a date picker from scratch, and even if you did, the question is should you?

In many (probably most) cases the value of building your own date picker is negligible compared to the value of getting a valuable feature in the hands of real users.

So let’s say you opt to use a component library to add a reliable, battle-tested, aesthetically pleasing date picker to your form in record time.

Which library should you choose?

Well, if you’re actually trying to get something up and running in less than an hour, just pick something, anything! You can always change it later!

But, assuming you’re not actually trying to get a form built by lunchtime for a demanding boss, it’s worth taking your time to consider these factors as you make your choice.

How clear is the documentation?

It doesn’t matter how good or intuitive a component library is, sooner or later you’re going to need to look something up.

Whether it’s how to bind the grid component to data, change the default button style, or add validation to the form, chances are you’ll need to lean on the docs at some stage.

Look out for clear explanations, concise (but comprehensive) examples and links to further details (if you want to dive a bit deeper).

A good check here is to simply read the docs for one of the more straightforward components (say a button) and also a more complex component (like a chart, or grid) and see if you can understand both (at least enough to get started).

If the docs feel like they’re making things overly complicated, this may be a sign of trouble to come!

How easy is it to set up and use?

Closely related to the docs is how easy it is to get hold of the component library, add it to your project and start hacking away with it.

Again a clear, easy to follow “getting started” guide is a must for any component library. Also (and this should really go without saying but…) does it actually work, without errors when you follow the guide?

It’s surprising how often a ‘ready to go’ solution isn’t always as ‘ready to go’ as you might expect.

Does it offer an (actually) free license?

Licensing can be a tricky, murky business, but it’s well worth checking the license when choosing a component library.

If you want something free, check any ‘free’ license doesn’t actually have limitations (for example not being able to use the components for commercial apps).

For example, MudBlazor is released under the MIT license (you can use it commercially, even modify and/or distribute it so long as you preserve any copyright and license notices).

Watch out for unclear definitions here. For example, if a library has an ambiguously defined ‘free’ period it’s probably worth factoring this in when comparing to others with clearer/more permissive licenses.

What’s your budget?

This one probably goes without saying but there’s a very significant difference between the prices of the cheapest (free) and most expensive component libraries out there.

Chances are you’ll get guaranteed commercial support with the more expensive options, and this may well be one of the most important factors for you or your employer.

On the other hand, community support might be enough (depending on how active/helpful the community is).

Either way, having clarity on your budget makes it much easier to filter out options which fall outside those boundaries.

Is it open source (and can you actually contribute)?

Open source may or may not be important to you, but there are a couple of reasons to watch out for it anyway.

First, if you really start leaning on a component library it has the potential to form a significantly large percentage of your application. Sometimes something won’t work as you expect and knowing the code is accessible at least means you could take a look if you needed to.

What’s more, you might find you need to tweak/improve something about how a component works and it’s nice to be able to share this back with the component vendor (and wider community).

Is there a supportive community?

Speaking of community, is there a community of users for the component library? If so, have a little explore, read some threads and try to read the tone.

Watch out for hostile/negative vibes. If you do get stuck you want to know you can ask questions without fear of being struck down by an indignant gatekeeper!

Also note the kinds of questions being asked. You might notice lots of questions about one or two key components. This is double-edged, it could be that seeing lots of questions gives you confidence you could get support yourself. Conversely, lots of questions might mean the component doesn’t work as expected, or that configuring it is complex/difficult.

How “big” (or heavy) is it?

Do you want a lightweight solution which mainly saves you time with ’essential’ components (buttons, tables etc.) but leaves you to implement everything else?

Or are you looking for a comprehensive component library including components such as a ‘datagrid’ to handle databinding, paging and all the other complexities of showing lots of data in a web application.

Your answer to this question is a useful filter to whittle down an ever-expanding list of possible component libraries for your app

How easily can you style (or theme) the components?

This is a biggie. Unless you’re happy with your app looking like every other app that uses this library (did someone say Bootstrap?) you will want to know how easy it is to alter the style of the components.

Themes come in here too. For example, how easy is it to toggle a light/dark theme for your app and have the components respond accordingly.

Does it play nice with other libraries?

It’s always nice to know you have options, and that you’re not necessarily locked in to any one vendor when building your applications.

With this in mind it’s good to know if you can mix and match component libraries, perhaps opting for one for all your ‘basic’ components but then leaning on something else for more advanced controls like DataGrids.

Does it cover the fundamentals (or are key components missing)?

Generally all the current component libraries cover the basics, but it’s worth thinking about the kind of application(s) you need to build and just checking that the key components are covered.

You’d expect all libraries to include the essentials at this point (think buttons, containers, forms) but your specific requirements might mandate extras like some sort of grid view, or the ability to render basic charts.

Knowing this up front (or spending a bit of time to consider what you’ll likely need) can save a lot of headaches down the line when you suddenly realise you need something the library doesn’t offer.

The choice is yours

There are no right of wrong choices here, and as the list of contenders continues to expand it’s important to know what your specific criteria are when comparing the many options.

Want to give it a go now?

• Check out this list of 9 Blazor component libraries
• Using the criteria above as a starting point, take a moment to brainstorm any other factors which are important (either generally, or for your specific situation)
• Use the criteria to filter the list of 8 Blazor component libraries down
• Hopefully you’ll get down to one or two options
• Test drive these options and see which one works best for you
• If you still can’t decide between a couple of options you might just have to
  • a) flip a coin
  • b) get a second opinion!

Getting a second opinion can be well worth it, especially if you can speak to someone who’s actually used the library and see what they think of it. There’s no substitute for real-world experience.

Just remember, whilst very little in software development is truly irreversible, change is often expensive, and spending a little time to make an informed choice up front is always likely to be cheaper than switching gears after a few months of development.

Next up