DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for The 7 Best React Component Libraries to Use in 2022
Amr Tawfik
Amr Tawfik

Posted on • Updated on

The 7 Best React Component Libraries to Use in 2022

In this article, I will be sharing with you 7 awesome React UI libraries that you should check out.

1. tremor

Tremor is a low-level, opinionated UI component library to build dashboards. It offers components, such as charts, layouts, or input elements, covering the essential parts of a dashboard or analytical interface. Our approach provides great flexibility between beautiful defaults and fast customization. The best way to get started is to check out our templates, called Blocks, for getting a feeling of how components are used and combined.

Image description

2. planby

Planby is a component for a quick implementation of EPG, live streaming timelines, schedules, music events, timelines and many more ideas.

Image description

3. React DnD

React DnD is a library that uses the HTML5 drag and drop API to create complex drag and drop interfaces. It is built on top of the modern API, making it easier to use and more powerful.

Image description

4. Advanced Cropper

This react cropper library gives you the possibility to create croppers that exactly suited for your website design. Don’t limit yourself. Rotate, zoom, transitions, autozoom and many other features included.

Image description

5. React Reflex

Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my requirements.

Image description

6. Tailwind

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

Image description

7. React Query

Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you
declarative, always-up-to-date auto-managed queries and mutations

Image description


Looking for a great community of people interested in Javascript and Crypto? Join our Discord server! πŸ’™πŸ§ͺ

Discord:
https://discord.gg/P8bjJ7CzBV

Top comments (20)

Collapse
 
bqardi profile image
Sune Seifert

Great article.

May I suggest yet another very promising component library for React called Radix UI.

It is an open source library full of unstyled components that focuses on accessibility and functionality, so your only responsibility is to style them. I think that is a great concept.

A library used by Vercel and CodeSandbox.

Collapse
 
pdxphilippmac profile image
PhilippMac

Im glad someone mentioned this already. I strongly recommend RadixUi.

Collapse
 
amrtcrypto profile image
Amr Tawfik

I'm glad you like the article.

I'm not familiar with Radix UI, but it looks like a really cool library. Thanks for sharing!

Collapse
 
nans profile image
Nans Dumortier

Hi!
Nice article. Quick remark: you misspelled Tailwind in your 6th title "Tawiland"

Collapse
 
khuongduybui profile image
Duy K. Bui

you both misspelled it. It's Thailand.
I'm kidding don't cancel me please :D

Collapse
 
taysongermano profile image
Tyson Monteiro

🀣

Collapse
 
amrtcrypto profile image
Amr Tawfik

🀣

Collapse
 
travah1 profile image
travahnetshisaulu

πŸ˜‚

Collapse
 
amrtcrypto profile image
Amr Tawfik

Thank you for catching that! I have corrected the spelling error.πŸ’—

Collapse
 
heyjulliet profile image
Julija Cibulska

ReactDnD is indeed great library, but the image used there is from react-beautiful-dnd (which in my opinionated view should be avoided as last real contribution was made there 2 years ago)

Collapse
 
amrtcrypto profile image
Amr Tawfik

Oh, my mistake. Thank youπŸ’—

Collapse
 
heyjulliet profile image
Julija Cibulska

Anyway, great collection of components, don't mind the people who love commenting to point out mistakes like myself :D . We are all human. Keep it up!

Collapse
 
khuongduybui profile image
Duy K. Bui • Edited on

cloudscape.design seems promising too

Collapse
 
madza profile image
Madza

These are awesome, thanks for sharing πŸ‘βœ¨πŸ’―

Collapse
 
amrtcrypto profile image
Amr Tawfik

Thank you, gald you like the postπŸ’—πŸ’—

Collapse
 
muhammadshahzaib profile image
MUHAMMAD SHAHZAIB

Awosome Library

Collapse
 
amrtcrypto profile image
Amr Tawfik

Thank you, gald you like the posπŸ’—

Collapse
 
rizkytegar profile image
πŸŽ‰ Rizky Tegar Pratama

awesome

Collapse
 
amrtcrypto profile image
Amr Tawfik

Thank you, gald you like the post πŸ’—

Collapse
 
arsalannury profile image
ArsalanNury

react query is really powerful then everyone should learned that.
thank for your article

Find and follow new tags! πŸ€” Did you know? Β  DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags