What's your favourite React UI library as of 2022?
Christian C
10 replies
Any great-looking UI library to share?
Been using Semantic UI for a while, any suggestion for the next library to try?
Replies
Christian C@chriscarex
Manipulist for MacOS
A library with Figma files available is even better!
Share
Damnnnn
@chriscarex I always hunt for such libraries.
Pull Request Approver
I've tried a lot but haven't found the best yet. It's always something I'm not happy about, it can be too dificult, or not customizable at all. It can be everything you need, and sometimes you can't do the exact thing you really want. I think UI library is super cool to build an app from the scratch and test some user flows, without spending too much time on building UI components. But when you understand that your business is working, you'll probably want to have unique design and nothing is better than just CSS.
P.S. I love the way the Mantine library works. It's simple and powerfull at the same time (https://mantine.dev).
Rebass! I like the color system
https://github.com/rebassjs/rebass
https://rebassjs.org/
Manipulist for MacOS
Damnnnn
You should checkout https://mui.com
(Previously called as material UI) Such a stunning upgrade.
Manipulist for MacOS
@shaikrish looks like MUI is leading at the moment :)
I've been using Material UI (MUI) and I think it's great
https://mui.com/
Manipulist for MacOS
@rosie_higgins_grapevine should give it a try! thanks for sharing! Any good MUI library for React Native as well?
On the hunt for the best React UI framework for your project?
Because of its popularity, you can find a huge array of frameworks designed to help you create a great-looking interface for your React project. To make it easier for you to find the best framework, we’ve done the work to curate our picks for the seven top options in 2022 and beyond.
Over the rest of this post, we’ll examine the different functionalities and user-friendliness of each UI framework so that you can pick the best one for your development goals.
Let’s jump right in…
First up, Material UI (MUI) is an excellent React UI framework with multiple pre-built components and templates. For example, it includes pre-built sliders, drop-down menus, and navigational tools, so you don’t need to waste time developing your own. Furthermore, each component meets current accessibility standards and is fully customizable.
Moreover, MUI comes with advanced theming features. You can work with Google’s Material Design system and further customize your code with CSS utilities. With these tools, you can control styling and component usage from the same location.
These features aim to speed up the development process and enable full customization. Moreover, they make the UI suitable for design needs too.
One drawback of using MUI is that some of its documentation isn’t written for complete beginners. You’ll need a foundational level of development experience to get the most out of this React UI framework. Furthermore, the documentation often doesn’t keep up with all the interface updates.
Overall, we don’t recommend MUI to newbies. However, if you’re looking for a broad library of components and almost unlimited customization options, you might appreciate this UI framework.
If you’re looking for a comprehensive web design system, consider using Grommet. It is a user-friendly option that includes many helpful UI components and detailed guidelines for using the coding language, layout, and more.
In fact, Grommet focuses on offering many layout components that are not available with other UI frameworks. It also has multiple design templates, patterns, and sticker sheets.
Grommet is one of the most accessible UI frameworks. It includes tools like screen reader tags and keyboard navigation to make the interface more user-friendly. Additionally, it has out-of-the-box support for the Web Content Accessibility Guidelines (WCAG).
However, Grommet is less customizable than some other UI frameworks. This simplicity can benefit beginners, but other users may feel restricted. Grommet also uses an external CSS system, meaning you’ll need to be careful with applying global styles to your work.
React Redux is probably best known for its predictability. You only need to set up which values you want from your components. The interface will extract and update them automatically. As such, it’s a straightforward interface that enables you to test your code in different environments and accurately compare the results.
In addition, React Redux is one of the top UIs for debugging applications. It comes with DevTools to identify changes in your application state, log them, and send error reports. These features make React Redux an essential tool for fine-tuning the details of your applications.
Moreover, React Redux automatically applies performance optimizations. The UI will only re-render the components after significant changes. Consequently, you can design applications that run at their full capacities.
However, React Redux can be time-consuming to use. Every time you want to change your application’s functionality, you’ll need to write several lines of code across best under table router. Therefore, it might not be the best React UI framework for complex development projects.