Well, speed. As an entrepreneur and full-stack web dev mentor wanting to create high-quality complex UIs in less than a week, I need a library that's well built and has a simple and straightforward interface.
Current libraries are awesome, but I can do better. I don't want to be arrogant here, I'm mostly standing on the shoulders of giants, specially Radix UI. But Radix is a low-level library focused on accessibility, meant to be composed into higher order components that abstract away its details.
Radix Themes is a good attempt at it, and I take a lot of inspiration from it, but is using plain old CSS (instead of utility classes) 🤢 and you need an extra CSS file for each component 🤮. It also doesn't have some components that Radix UI has, like the Accordion component, which is confusing 🤔.
shadcn/ui is also awesome, but it's mostly just a styling layer on top of Radix UI so it inherits most of its low-level complexity. Some components abstract away Radix UI's low-level complexity, while others add unnecessary complexity 😭 That inconsistency hurts my brain 😬
Reach UI stopped being developed due to Covid and Ryan decided to learn the Guitar instead 🤣
The andrecasal/ui library aims to be a high-quality library that allows you to create complex UIs very fast. This means it needs to be easy to understand, easy to use, and needs a clear separation of concerns between design and functionality.
When you're focused on coding the UI, you don't care about how it looks, but you need to know you'll have complete control over it in the future. Likewise, when you're focused on design, you don't want to be bothered with code and functionality.
This clear separation of concerns is achieved by colocating all of the design variables in the tailwind.css file. If you're a designer, all you need is to change those values to achieve the design results you're looking for. If you're a developer, you can focus on the code and functionality without having to worry about the design at all, knowing the designer has complete control over it.
To understand how this works, take a look at the architecture section.
The goal is to make the components so good that you seldom need to change them. When we reach that stage, I'll make this a proper NPM package for the sake of installation speed as well.