8 Free and Open Source Blazor UI Libraries

[@ClaudioBernasconi]

IMPORTANT UPDATE: As of 2024, Blazorise no longer offers a free commercial license. Instead, you need to purchase a professional (paid) license for all commercial use. Read more about their licensing terms on their website. Thanks to @caseypries7559, who wrote a comment about it below this video.

[@vedd5]

Do you think Syncfusion, Radzen and others can do the same and change license for commercial into fully charged plan? It's a really waste of time to implement library like Blazorise and after when company change license conditions you need to remove library and refactor all application.. Maybe it is better to make your own components if you need them free of charge in the future.

[@yumyum7196]

I'm about to build my first Blazor app and I was worried there weren't many options for UI libraries. Thank you for making this video!

[@ClaudioBernasconi]

Thank you. There is plenty of choice. Those are the free options. There are even more paid options. 😉

[@SaaidRajji]

Mudblazor is one of the best however there charts cover only a limited types of charts

[@ClaudioBernasconi]

Thanks for the feedback. It seems like every library has it's strength. That's why I wanted to showcase as many as possible so developers are aware when making a decision for their use case.

[@jabak7094]

The charts are limited yes. But with a little effort you can make charjs etc. work just fine with blazor/mudblazor

[@ibrahimhussain3248]

I like mudblazor

[@ClaudioBernasconi]

Great to hear. What type of application have you built with it?

[@angelosmakis5289]

I use Radzen in commercial apps and works really well. It includes many UI components and they cover alot of functionalities in their components.

[@ClaudioBernasconi]

Great to hear Radzen works for you.

[@vietnguyen2521]

did you buy enterprise radzen lisence for your commercial apps?

[@angelosmakis5289]

@@vietnguyen2521 it does not need a commercial license for the components.

[@jeffafaaah]

Thank you very much! I love to see how different organizations implements different solutions.

[@ClaudioBernasconi]

Great to hear you enjoyed the video! 😉

[@BlazorPlate]

Are there any plans for you to create a comparative review of Blazor starter boilerplate templates?

[@ClaudioBernasconi]

Didn't know there is a community creating Blazor project templates. I'll take a look.

[@SuperDre74]

Hardest thing to find is a numbers component that really let's you only type the restricted format, like only 3 digitsvin front of the decimal separator and 2 decimals and not any number of digits and decimals which after leaving the editbox is truncated. I think I only saw 1 blazor ui library that had that, but it was freaking expensive using a subscription.

[@ClaudioBernasconi]

Understandable. I think that's a specialized case where implementing your own input field makes sense. You can bind to the onChange event to validate the input or use other approaches to show the format and validate the input. I wouldn't buy such an input field but implement my own, I guess.

[@SuperDre74]

@@ClaudioBernasconi You call inputting a percentage or money amount a specialized case? if you think validation is the place to just tell if a person is inputting a correct figure, then you really are a crappy developer. If there is a limit on 2 decimals, the user should not be able to input more decimals, if there is a limit on the digits before the decimals, the user shouldn't be able to enter more digits as allowed. if my input is only lowercase alfabetic characters, I should never be able to enter anything else (and capital characters should automatically be lowercased).. If you as a developer let users type any other characters and are just catching it on the leave cell validation, then you're really just not doing a good job.. Yes there are specialized cases where a specific value might only be caught on validation after leaving the input, but limiting decimals and digits isn't one of those.

[@madsmikkelrasmussen240]

What a great overview, THANKS!

[@ClaudioBernasconi]

Thanks, Mads! 😎

[@cptoneeye]

All this libraries all are based on a specific design. Is there a library which just provides the basic boilerplate components from where on you can implement your own style and behaviour? Blazored comes quite near to that.

[@ClaudioBernasconi]

Great question. I don't know of such a library. However, it sounds like what you want is something like Tailwind CSS or Bulma where you get the CSS and build your own components based on it?

[@andregenari6590]

thank you very much for this list.

[@ClaudioBernasconi]

Thank you for leaving a kind message.

[@imadabab]

Thanks a lot Claudio for this useful video. I actually prefer MudBlazor it is totally free and I found every component needed in any Blazor application.

[@bernpaul9868]

sir how will you separate the model instead of inside the project it should separate outside?

[@ClaudioBernasconi]

I don't understand your question. With component-oriented programming, you have your user interface and interaction code in components and you separate services and data access code into other projects.

[@hamadsherazi6896]

What about syncfusiin. I love it

[@PhilGeissler]

Thank you, very helpful!

[@andrewmuller8127]

Mudblazor!

[@ClaudioBernasconi]

Lovely. What kind of applications do you build with it?

[@bernpaul9868]

can you build inventory system? or erp ?

[@carlosdelvalle5417]

With Blazor? sure! No problem 😎

[@luggiiiluggiii7179]

Very cool! Does anyone know if Fluent UI is free for commercial use?

[@ClaudioBernasconi]

Great question. It looks like they have an MIT license which allows you to use it for commercial use for free. This is no legal advice, make sure to double-check or ask a lawyer.

[@luggiiiluggiii7179]

@@ClaudioBernasconi okay I'll ask a liar ^^

[@Poeisible]

How is about reporting?

[@ClaudioBernasconi]

If you are talking about PDF creation, I have a video about QuestPDF on my channel: kzbin.info/www/bejne/immccpJtmd9khpo

[@chankwowkeung9368]

Which grid lib is better ?

[@ClaudioBernasconi]

At this point, I haven't used all of the options in real projects. I'd say MudBlazor offers an overall great experience and I chose it for one of my production applications. I'd say start there to see if it fits your needs and try other libraries if it doesn't suit you. You can always mix and match, just be aware of the additional bloat. I hope this helps getting you started.

[@ace90210ace]

You missed sync fusion probably because you said you didn't want to include paid for and didn't realise sync fusion offers a free license for projects under a turnover of £1 milion but others on this list had the same pricing so I think it could have been included Not surprised though they make it hard to spot the free license exists

[@ClaudioBernasconi]

Yeah, I missed that one. You're right. I admit. 😊

[@aymon21ify]

You can use filament with laravel that look easy 😅

[@ClaudioBernasconi]

What UI library do you like the most? 🤔

[@MohammadKomaei]

MudBlazor

[@julienlegu4169]

MudBlazor

[@НатаниэльДампо]

blazor syncfusion

[@jabak7094]

MudBlazor

[@Remotely-Possible]

I'm trying MudBlazor, but find it inconsistent and confusing. Also DataGrid is still buggy and doesn't natively support drag/drop rows reordering.

[@TheVincent0268]

How to choose?

[@ClaudioBernasconi]

Try what you think is interesting, and if it feels right, go with it. Also, take a look at the available components. It depends on what components you need for your project.

[@Dinnovate]

Really looking for themes that work well for Blazor. It's a huge gap. Bootstrap has thousands of themes but Blazor basically zero.

[@ClaudioBernasconi]

There are different paths you can take here. You can choose one of the open-source Blazor UI libraries mentioned in this video and look for great theming support. Or you can use one of your preferred CSS frameworks, such as Bootstrap, Tailwind CSS, or Bulma, and style your applications like that. Also, you can combine those two tools. I'd say that there aren't such things as "Blazor themes". Blazor uses open web standards, and therefore, you can use what you want/need, including Bootstrap. The default project template contains Bootstrap, so you can select your theme and be ready to go. I hope this helps.

[@ilkertulgar441]

Çok iyi kütüphaneler tanıtmışsın teşekkürler .

[@ClaudioBernasconi]

Thanks for your kind comment. 👍

[@guillermomazzari8320]

Have you heard about syncfusion? Thanks for the video!!

[@ClaudioBernasconi]

Yes, I have heard of Synfusion. Do they also offer a free and open-source library? I know there are paid options, which I excluded from this video to promote community projects. 😉

[@guillermomazzari8320]

@@ClaudioBernasconi yes, I have it, its free as long as you meet certain conditions, I think you cant gain more than a million US Dollars per year and not be a big company, I freelance as a side job and I told them that, so they gave me the free license, it includes everything the paid one does

[@vedd5]

@@guillermomazzari8320 Hey, but what in case if they do the same like Blazorise and remove free community license for small business? Are you ready to refactor your projects or you gonna to pay the annual subscription?

[@orhancanoguz4423]

Radzen Blazor

[@ClaudioBernasconi]

Nice! What do you build with it?

[@orhancanoguz4423]

Backend for HYBRID + MAUI mobile apps. But the product still expensive, wating for "miracle discount season"@@ClaudioBernasconi

[@Ahmed-ui5wn]

what about MudBlazor

[@ClaudioBernasconi]

04:40 isn't it part of the video?

[@caseypries7559]

Blazorise no longer appears to be free for small business so I crossed that one off my list.

[@ClaudioBernasconi]

Thanks for letting me know. I will double check the information and pin a new comment including the information.

[@Remotely-Possible]

Isn't SyncFusion free for small companies? (less than 5 employees and less than $1,000,000 income)

[@ClaudioBernasconi]

I wasn't aware of their license when producing this video. Thanks for letting me know. 👍 My goal was to promote open-source, community-driven options that don't have an advertising budget like companies do. I'm sure SyncFusion is a great choice, and you/you're company qualifies for a free license; that's great. 🙂

[@capdiemcao3382]

I vote for MASA Blazor

[@umer.on.youtube]

Forgot the best one. TrailBlazor for TailwindCss

[@ClaudioBernasconi]

Thanks, heard it the first time today.

[@lancemarchetti8673]

Cool!

[@browaruspierogus2182]

all those UI companies can go to hell - they make businesses dependent on them and jeopardize the business after some time

[@ClaudioBernasconi]

I don't understant your situation. It's up to you to take a dependency on any open source project. Or you do it all yourself. It's your decision, you're in control. Just make sure you understand the implications of doing it all yourself, such as longer time to market, and more maintenance work. Also, those UI frameworks mentioned in this video are open source and no company is involved that could have the interest to make you depending on them. Those are developers like you and me who build those libraries without getting paid. At least, that is my understsnding.

[@browaruspierogus2182]

@@ClaudioBernasconithey make those UIs dependent on other internal components that are internal to project and rely on custom aging frameworks that blow up after 2 years. Unless someone writes stuff in plain vanilla js or nicely laid out webasm in popular languages

[@DigitalNomadOnFIRE]

"Blazorize is $200 cheaper" Title: 8 Free and Open Source Blazor UI Libraries 🤡

[@eduardrivas6964]

Good content man, but that way of talking wth

[@ClaudioBernasconi]

Thanks for your feedback. What do you think I should improve? Pacing, pronunciation, or what else? English is my 3rd language.

[@eduardrivas6964]

@@ClaudioBernasconi It's weird, you sound like a redneck (no offense intended).

[@DataJuggler]

#9 DataJuggler.Blazor.Components (or #9,000).

[@ClaudioBernasconi]

When it does its job, it can also be #1. 😎 Thanks for sharing. 👍