How I wasted 3 days upgrading to FluxUI

I'm sorry for the clickbait title. I actually have only good things to say. I just wanted to catch people commenting before reading the article.

It started as a simple PR: add FluxUI to unolia.com and upgrade to TailwindCSS v4, and it ended as a big refactor of my project. Let me tell you my journey.

I started using FluxUI in other smaller projects, and I got used to it, especially for forms. It felt much cleaner and faster to work with Flux than anything else I had used before.

• Before the migration
• The big refactor
• What’s next ?
• Before and after screenshots
• Conclusion
• TLDR

# Before the migration

Unolia.com is based on Jetstream, so most of the input was using <x-input> syntax shipped with Jetstream. Jetstream has been very convenient for jumpstarting the project, but over time I needed more.

I bought TailwindPlus several years ago, and it helped me a lot in making beautiful UIs. The thing is, if you don’t use components, you end up with big, unreadable HTML and inconsistency throughout your app. And if you want different input text with suffixes or prefixes, that means writing a lot of conditional code or duplicating code.

Anyway, for my case, I didn’t bother that much until now.

FluxUI is perfect for me. I use Livewire a lot, and it’s so tightly integrated. Design-wise, it is not far from TailwindPlus, although I preferred the dropdown design over it and other small details.

# The big refactor

I began the conversion gradually, starting with a few input replacements.

Next, I worked on the dropdowns.

Then I noticed in the documentation that I could support dark mode.

After that, I lost track of what I was doing.

I became fully immersed in rewriting everything to enable dark mode support.

That meant rewriting some Jetstream components, reworking some layouts, some wording, well every detail of my app.

And the result is beautiful.

I had some head-scratching moments, especially with the way Jetstream handles its modal and also where Flux doesn't work outside Livewire sometimes.

I'm grateful to have made time for my robust test suite, especially the end-to-end tests.

Also, going through all my codebase and retesting my app allowed me to fix a couple of minor bugs or simply improve the experience.

# What’s next ?

Now, I want to rewrite everything myself.

I never liked that Jetstream was a library instead of a starter kit. It's cool at the beggining but then it becomes difficult to personalize.

I realized that I added those dependencies to kickstart my project for the UI they provide, rather than for their features. I wanted Jetstream for team functionality and Filmant for notifications.

The same applies to wire-elements/spotlight. I never really used it, which is why I never purchased the pro version either. I had considered it, but after reading the documentation, I realized it wouldn’t fully offer the features I wanted. I believe a command bar needs to be truely well-made to be useful, which is why Raycast is so popular.

Anyway, I think FluxUI will allow me to create a nice command bar myself.

Also, some of those packages had versions with strict Livewire version locking (looking at you, Filament), and I didn’t like that because for a while a fix I needed was blocked because of that.

So I’ll continue removing dependencies from my projects

• laravel/jetstream => Integrate the logic directely in my app.
• wire-elements/spotlight => FluxUI Command
• filament/notification => I will probably write my own package that leverages FluxUI (or not), but I already have specific needs that I'm sure are worth a PR.

All of this can obviously wait.

This is the kind of thing that does not even make it to the TODO list.

I just dive deep into when I feel it.

# Before and after screenshots

From the dashboard, you can see how the header and the navigation are much more balanced than before.

I replaced the filament table with a FluxUI table. It's much easier to personalize.

For the domain: more space, cleaner tabs, button weights revised, record type aligned to the right. Also using the new avatar component for the favicon of the website (future small feature). Again, small details, but they help see it clearer. Also, it took me some time to add a dark mode to my custom radio buttons.

# Conclusion

So this is how a simple "let’s add flux" turned into "let’s refactor my entire project for no reason."

Why this title, though? Because using 3 days of my free time to add 0 value to my customers is arguably a waste of time.

But I don’t regret a single minute.

It was great. unolia.com has a clearer UI, a better UX, and most importantly, cleaner code.

I can now focus back on other features.

To conclude this article and if you like the TALL stack:

100% recommend FluxUI.

# TLDR

• Refactoring to Flux reduced the number of lines of code in my project while giving me more features.
• unolia.com now supports dark mode.
• Jetstream is about to disappear completely from my project. I embrace the new starter kit way.
• Tests are mandatory before rewriting your app. However, tests can’t see everything. Manual tests are still mandatory in some cases.
• Refactoring also means going through all your app and improving every detail of it

Post scriptum:

I'm wondering, should I do a dark mode here?

Nah, I think I have better things to do.