UI Libraries

Over the past year, I've experimented with quite a few UI frameworks across both Vue and React projects. Each library has its strength, quirks, and learning curve, and I've realized that no single one fits every single project - but here's my honest take on the ones I've used most.

ShadCN (⭐ 9/10)

It's not a component library in the traditional sense - you're actually importing raw components builts on Radix primitives and TailwindCSS, which means you own the code.

The freedom with this library is incredible. You can tweak every pixel to your liking, remove bloat, and build a design system that perfectly fits your project. It's especially great for developers who cares a lot about consistency, scalability, and performance. With that said, I have to say that most components don't need to be tweaked at all - they are already built beautifully with a minimalistic and modern design.

The only downside? It's not plug-and-play. Setting things up the first time can be a bit heavy compared to something like HeroUI or NuxtUI - but once you understand the structure and the way it works and its pure flexibility makes it a great choice for any project.

MagicUI - ShadCN based (⭐ 9.5/10)

MagicUI is built on top of ShadCN and adds animation, motion, and style presets that make a project instantly feels more magical. If you couldn't tell, this portfolio was built using ShadCN and MagicUI - and I must say I'm really impressed with the results considering it's my first time using it. It honestly made the difference between something that looked good and something that felt alive.

Because it follows ShadCN structure closely, you keep full control - you import only the components or effects you need, modify them freely, and stay close to native TailwindCSS styling. Their documentation is extremely easy to read and it perfectly integrates Framer Motion for smooth animations without any extra setup. The only downside I can think of is that some of the components may come off as a little gimicky, but that depends on your personal taste.

If you're looking for a mi of aesthically pleasing and premium feel, MagicUI + ShadCN combo is a great choice.

NuxtUI (⭐ 8/10)

NuxtUI was my introduction to UI libraries in the Vue ecosystem. It's beautifully integrated into the Nuxt framework - components auto-import. theme management is a breeze, and you can go from zero to production UI in minutes.

That said, its biggest strength (ease of use) is also its limitation - it's harder to customize deeper styling or animations without breaking out of its abstraction. For smaller dashboards or fast MVPs, though, it's definitely a great choice if you're already using the Nuxt framework. You focus on your code's logic instead of fighting CSS

HeroUI (⭐ 8/10)

HeroUI is another great developer experience-focues library - super clean, Tailwind-based, and very very easy to use. Perfect for quick prototypes and internal tools.

I used HeroUI for a few projects, one of them being the whole IUMC platform. I found it to be a great choice for quick development and it defiitely helps you focus on the other parts of the project. However, the challenge is that it's not as flexible as something like ShadCN - you can't easily customize the components without diving deeper into the documentation to understand how the components are built.

If you want a balance between speed and polish, HeroUI delivers for sure.

Bootstrap (⭐ 6/10)

Bootstrap was my startin point - and while I respect it for its legacy and setup, it feels very outdated compared to all these new libraries. the design language is a bit rigid in my opinion, and customizing the components requires a ton of overriding CSS variables.

That said Bootstap is still a great entry point for beginners. It taught me structure and responsive layout fundamentals early on, but after learning newer libraries, I found it to be a bit limiting.

Final Thoughts

If I had to pick a favourite it would have to be ShadCN along with the numerous libraries built on top of it. They strike the perfect balance between flexibility, aesthetics, and maintainability. It gives you the confidence and control over your components.

For projects where speed matters, you cannot go wrong with NuxtUI for Nuxt based projects and HeroUI for React based projects. They are excellent, especially if you're okay with a little less granular control

Bootstrap? It had its time - but these newer, modern libraries just fit today's dev workflow better in my opinion.