Unboxing Experience: Blazor Component Libraries

I need to select a component library for a large project. The back end is far enough along to start stitching things up.
I decided to write about my experience mostly so I could log - for my own use - what worked and what didn't. There are lots of moving parts and I was just doing things repeatedly and struggling. Not scientific.
I'm not the kind to read all the documentation before I start. I do have a decidedly short attention span, and I expect Getting Started instructions to be accurate and the initial results successful.
The Effort
The idea is to download each library, install the VS2022 extensions, if any, and use a CLI or new project template to create an app and run it before making any modifications.
Requirements
The app will have:
- Identity Individual Accounts
- Globally interactive
- Interactive Auto
The Metric
At a baseline I want to have the app run without modifications, corrections or side trips to yak shaving or cleaning up.
Then I need to see that pages are in the correct projects; rendering is happening when and where it's supposed to, and the controls are working as expected.
Microsoft Blazor Template
These can be built with a dotnet CLI Blazor template like this:
dotnet new blazor -n NeatoStandard -int Auto -au Individual -ai
This does some things that I need:
- It puts the MainLayout, NavMenu and Home pages all in the client project.
- This is important because it removes the need for a constant SignalR circuit to be maintained at app idle. The only place a circuit is needed is the first time the app is run on a given device.
- It puts all the Identity related things in the server project to keep them secure.
- Because these pages are rendered statically at the server, certain interactive controls simply won't work. Yet, at a minimum, the Identity scaffolding that Blazor creates normally needs to be styled to look and feel like the rest of the app.
- In the
App.razor
files, it adds parameters toHeadOutlet
andRoutes
components to specifyInteractiveAuto
Testing the template
To test this, I add the following line to my Counter
page:
<h2>@RendererInfo.Name (@RendererInfo.IsInteractive)</h2>
This will show me what happens when the page renders. The first time, I'll see that it is rendered as Server (True)
.
Then when I refresh the page, I'll see it become Static (False)
(that's the server prerendering it) and it will quickly turn to WebAssembly (True)
.
This is the behavior I want. The standard template works great without modification. Kudos, Microsoft.
DevExpress
I first installed their CLI templates and first thing I noticed is there is no option for global interactivity, oddly there is not option for Framework, either. So I can't specify dotnet 9, which I need for this all to work, including my RendererIndo
test.
No problem, skip the template and let's try to create one from inside Rider.

Well, there's no option for Global Interactivity here, either. That's disappointing.
I created the project and sure enough, the only page that ends up in the client is the Counter
page. MainLayout
and NavMenu
are in the server project which means we basically have a server app with one WebAssembly
component.
Let's build it and see what happens... nope. Missing a semicolon in one of Account
controls.
Fixed and launch... well, sort of. Evidently all the CSS is missing because the page is a mess. They've marked the Counter
page with @attribute [Authorize]
so I have to modify that for my test.
Ok, I can't do that. In the project file they are referencing dotnet 8.
I have to say it's a little disturbing that the first experience out of the box is broken in plenty of ways.
Maybe it's Rider it doesn't like. I'll try this again using the CLI.
- @using DevExpress.Blazor doesn't resolve. I added a
@using global::DevExpress.Blazor
to fix that. - Same missing semicolon as before.
- Missing using statements on some pages as well.
- Still dotnet 8.
And... CSS still broken.
I'll try one more time, using VS2022. I just that nice of a guy.
There is additional tooling for VS2022 in that they have a "Template Kit" and an older "Template Gallery". I guess I'm doing this twice.
I'll try Kit first.
I am presented with a Wizard from which I select Blazor. The next step offers me Framework and Render Mode options. No Global Interactivity and no Identity. And that means that none of the Identity stuff will be scaffolded. That's a ton of work.
And here's a little progress. This builds and runs and even looks pretty good. Still referencing dotnet 8 and again, the Counter
page is the only thing in the client project.
Now I'll try the Gallery.
This one does offer Authentication
. It also says there are newer templates, referring to the Kit, which seems like a step backwards now since it has even less applicability to my needs.

Still no option for Global Interactivity.
The wizard then presents a theme selection and some additional settings, like component size.

And launch... nope. That pesky using statement still needed to be fixed in both projects.
Now we're talking. This looks pretty good, actually.

Now let's try our test. Welp. Can't do that because the project files are still referencing dotnet 8 package references, despite targeting the dotnet 9 framework.
I know, I'll just upgrade those packages to dotnet 9 versions. Try again.
The app runs with my new test line in the Counter
page. And it comes up as Server
and IsInteractive
as true. I expected this on the first run. But when I refresh the page and I'm expecting to see it swap to WebAssembly
instead it now says Static
and IsInteractive
is of course, false.
There is an error in the browser tools that complains about the RendererInfo
reference.
Honestly, at this point I'm just debugging their product and while I could probably manually find a way around all this - it's a really terrible look for them. It is really only a suggestion of the struggles I would encounter as I become more and more dependent on the investment I had in the library.
If they can't get it together on a potential customer's first experience, they shouldn't expect them to transform into an actual paying customer. I was really hoping this library would stand out. Karl Franklin's Blazor Train is sponsored by them and Karl's video are really great.
Let's move on.
Telerik
In their Getting Started tutorial they state that VS2022 is required. If it all works as advertised, I'll switch to Rider.
I didn't even get that far. Evidently there is no CLI option for creating a Telerik project. Instead, they direct you to create a standard project and then later add the Telerik components to it.
OK, I had hoped the Identity pages would all be synced to the component library I was installing. With this approach, that won't happen. I'll have to do it manually.
Then I saw this:

Well, this actually worked. First time. And it's probably because it's the standard Blazor template with a single button that I added.
The lack of a working, dotnet 9 template is a disappointment. What I want is to not reinvent the wheel for standard things, even if it is just some Identity pages.
I may return to this if nothing else works.
FluentUI for Blazor
This is the simplest so far. The template works well, meeting the three criteria right out of the box.
dotnet new fluentblazor -n Neato.Fluent.CLI -int Auto -au Individual -ai
I simply built it and it ran.
Testing worked as expected.
What's interesting is that the Identity pages, which are static as suggested by the Telerik docs, still allow you to theme all the buttons and so on. In fact, while you have to alter the page to reflect the static rendering of it, the look can be largely the same. There is a great video on SSR and how you can make a form work smoothly with it.
To me, that suggests a more thorough approach, even though the overall component list is smaller than other offerings. This is the easiest library to get started with so far.
These controls wrap the Fast components from Microsoft. The current version they wrap is being retired. There is some discussion of how they will move forward with the new, replacement version. The component list will shrink and eventually grow back.
However, that ensures that bugs that exist in the library they are wrapping won't be fixed. You'll be forced to find a workaround at that point.
MudBlazor
I installed from the template CLI.
dotnet new mudblazor -n NeatoMudBlazor -int Auto -au Individual -ai
I noticed that if I didn't put any periods in the name of the project, I got less errors. Not sure what that's about, but on a lark, I tried the name you see above, and it worked, right out of the box.
Score one for open source.
But interestingly enough, the nav menu button does not activate the drawer when you are a on page (like the login page or any of the Identity pages). It's basically dead. And if you are on a mobile device and you select an Identity page but want to see the menu? Well, that doesn't work. It's not the nav button, it's the drawer.
So, things look broken. I understand why, but there needs to be a solution if they are seeking adoption of the product, open source or not.
All of the pages are in the proper projects.
I'm using the newest MudBlazor v8. So dotnet 9 is supported. If you have an old CLI template lying around, you can get caught with installing v7 instead of v8.
A user of the library suggested a workaround for the broken drawer problem.
Sysinfocus simple/ui
You can find the library here.
It's very early days for this one, but it looks promising. No templates, seems straightforward. Not sure I'd bet my product launch on it, yet.
Syncfusion
Like the others, you download their libraries and install their extensions for VS2022 and their Essential Studio. If you review the Getting Started section, it looks like their only option is to create a standard app from the Blazor CLI template and then add their libraries to it. This is what Telerik did. That means no styling on the Identity pages.
So I tried their Essential Studio and it is definitely better.
And here we are, again.

First off, they're the only ones to all me to choose Interactivity location. And they are offering the Fluent theme. That's helpful. And dotnet 9 and Auto interactivity are supported. The only thing they're missing is Authentication.
I guess they didn't want to deal with the Identity bits for InteractiveAuto
, because you can make that selection for InteractiveServer
. Most interesting is that both the open-source projects did the work on Authentication and none of the commercial projects did.
You can then select the controls you want to add at the start of your project, so if you already know which one's you'll need, that's pretty cool, too.
I had to update some libraries, as the template included release candidate references. I fixed those and it built and ran without a problem.
Turns out that when you select the controls, you get sample pages for each control explaining how to use them. Very handy.
You get nagged to put in a license key, but that's fair enough. Their licensing is workable if you're a solo developer and meet the criteria. You should check that out.
But... they managed to put the pages in the correct projects, but instead of InteractiveAuto
in the HeadOutlet
and Routes
, they've just made them InteractiveWebAssembly
. Nor was AddInteractiveServerComponents
specified in Program.cs
.
After making the modifications for InteractiveAuto
the app runs, and it is rendering properly - first server, then WebAssembly
- but while it is server and interactive, none of the buttons work.
So I checked and the individual pages they created are all set to @rendermode InteractiveWebAssembly
. I adjusted one of those and now that page works, but I wonder if there's a reason they don't want to use InteractiveAuto
.
Blazorise
A template is provided but it doesn't include Authorization
, Global Interactivivity
or InteractiveAuto
. So, not great. On the other hand you do get to select Tailwind, Bootstrap or whatever so that configuration is done for you. Helpful.
Couple packages were out of date and after fixing those, it built and ran.
Once up and running there are some demo form pages, a drop down for localization (which I didn't explore) and a theme selector drop down, which changed the primary color of some buttons, but I didn't explore that, either.
No Authorization, but InteractiveAuto
appears to have been automatically selected.
And my test works as planned, but only after I built in release mode. I don't think that's on Blazorise, though.
They also have a template you can install from the VS2022 new project dialogue. It's also well-constructed with prompts for colors and CSS integrations.
So, one of the better experiences so far; minus the Authentication
part.
Scorecard
Pretty dismal at this point. No set of libraries met the three things that I needed without what will be a lot of work. Which is Mr. Lazy here is trying to avoid.
I'll try to create an app with each one so I can get a feel of how much work a form is, menus are, etc.
Along the way I may have to contact their support, and I'll write about that, too.