UI Libraries/Frameworks for Your React apps

#react #css #tooling #beginners

Overview

Nowadays we have at our disposal lots of frameworks and libraries that help us to be productive in our daily lives, whether in personal projects or at work.

And one of the frameworks that helps us a lot on a daily basis is undoubtedly React, however our applications do not only have JavaScript, our components need to be styled. This styling can be done using different tools, and it is some of these tools that I will talk about today.

Tools

First I'll talk about Bulma, which is an immensely simple CSS framework to use. One of its strengths is the documentation, it is very explanatory, clear and has a large number of examples. In addition, it has a large number of fully responsive and modular components.

However, the reason I recommend bulma is because the class names are super simple and intuitive, I think it's easy to memorize the overwhelming majority. Just as the grid is the simplest and clearest there is (in my opinion).

One of the very interesting points is that the creation of the page layout, whether simple or advanced, is very fast and you can add some customization.

Now talking about a library inspired by a design system very popular in the Ant Design community and one of its advantages is the visual consistency for all components, typography and icons.

If you are thinking of creating an application that has some connection with dashboards, or any area of management, this is in my opinion one of the best options you can have. Obviously, the bookstore is not limited to that, but for applications of this kind it ends up making our work immensely easier.

If you have to deal with lots of components on a single page, such as tables, lists, notifications, drawers, forms, among others. This library has a large number of components and solutions.

The next library that I'm going to recommend in my opinion is quite convenient for the overwhelming majority of people, at least I think it fits well into several personal projects I've done in the past.

It's a CSS framework that has a lot of components and if you're already familiar with Boostrap you'll feel free to work with this framework.

I'm talking about Halfmoon, each of its components is very modular and can be reused in several occasions and I believe that the components you need to build complex layouts like dashboards will be found in this library.

Besides the CSS components you can still use JavaScript function to make interactions like opening and closing the sidebar or even changing the website theme from light to dark.

Now I'm going to talk about a bookstore that I think is one of the most advanced, flexible and at the same time simple that we have available for creating web applications. I'm talking about the Chakra UI.

I think this is an amazing library because it is based on very customizable components, with a great level of accessibility and a declarative approach. Furthermore, it is possible to create your own theme in an easy way, allowing you to create your own design system.

Unlike libraries that look similar, you can use these components and with styling it's possible to have different looks, it's just amazing.

All the libraries I've talked about so far are all known by the community, but this time I'm going to talk about a small library that I recently discovered and that I quickly fell in love with.

I'm talking about NextUI, this library is composed of several components, all of them beautifully styled and with several variants. If you are looking for a library to help you create simple but modern looking websites, this is the ideal library.

One of the things that attracts me about this library is the color palette and the fluidity of the component animations. In my opinion, if you are looking for the ideal library to create a portfolio website with a modern look and a simple layout, this is the ideal library.

I think you should give this library a chance because I believe that in the future it will be very interesting, not to mention that the documentation is incredible.

Last but not least, now I'm going to talk about xstyled, for those who don't know this framework, imagine mixing Tailwind with Chakra UI and Styled Components. This framework takes a utility-first approach, along with CSS-in-JS and in a declarative way. My dear friend, this is everything I like to use in one tool.

I understand that all this innovation that is happening on the frontend with all these technologies appearing may end up making people give up on learning certain things, but take your time, do everything at your own pace. When you feel confident I recommend you to try this incredible library.