DEV Community

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

Posted on โ€ข Edited 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
ย 
amrtcrypto profile image
Amr Tawfik โ€ข

๐Ÿคฃ

Collapse
ย 
travah1 profile image
travahnetshisaulu โ€ข

๐Ÿ˜‚

Collapse
ย 
taysongermano profile image
Tyson Monteiro โ€ข

๐Ÿคฃ

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
ย 
madza profile image
Madza โ€ข

These are awesome, thanks for sharing ๐Ÿ‘โœจ๐Ÿ’ฏ

Collapse
ย 
amrtcrypto profile image
Amr Tawfik โ€ข

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

Collapse
ย 
khuongduybui profile image
Duy K. Bui โ€ข โ€ข Edited

cloudscape.design seems promising too

Collapse
ย 
arsalannury profile image
ArsalanNury โ€ข

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

Collapse
ย 
rizkytegar profile image
๐ŸŽ‰ Rizky Tegar Pratama โ€ข

awesome

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๐Ÿ’—