Introducing Flowbite Blazor WASM Starter Project

#dotnet #css #opensource

Hi There

If you've been following my articles for a while, then you should know I'm a fan of Tailwind CSS. And if you're familiar with Tailwind CSS yourself, you would also know that there's a vast number of resources when it comes to UI libraries built with Tailwind. My personal favorite is Flowbite, which I've used in some of my projects and I absolutely love it. Luckily though, Flowbite introduced their Blazor integration in late 2023, which made it possible to use their components with all the interactivity goodies in Blazor applications, which is INCREDIBLE.

However, for a good while, the integration only worked for Blazor server, on the other end, Blazor WASM didn't have its integration sorted out, but a while ago, I was reading their docs and found that the integration for WebAssembly is actually out. So I tested it myself and it does work flawlessly.

So, what's the starter project all about?

It's simple, in every .NET project, we've got templates which we can utilize to create our projects much more quickly, the template would do all the wiring and setup for you, so you can hit the ground running. For that reason, I wanted to create the Flowbite Blazor WASM Starter template. The main reason being, setting up Tailwind alone, is a bit redundant, add Flowbite to the mix, and it's more setup you got, and to be honest, we .NET developers are a bit spoiled, because the tooling is always productive and quick, and that's what the template is for.

💡 The previous pictures showcase the look of the project using some of the components Flowbite provides, the design is same as that of the default template.

The template includes everything you need from tailwind's config file, the required packages and node modules, CDN link, and everything you need to have Tailwind & Flowbite up and running in your Blazor project.
All you have to do is clone the Github repository, run 2 quick commands, and the project is ready for development.

I will not go into how to install or use the template, because I documented all of the necessary information inside the repository's Readme file, so if you want to get started, you can follow the link for the Github repository, and take it on from there.