DEV Community

Cover image for 4 Best UI Framework For ReactJS
Suraj Vishwakarma
Suraj Vishwakarma

Posted on • Updated on • Originally published at surajondev.com

 

4 Best UI Framework For ReactJS

Introduction

Building any project from scratch is painful as it takes a lot of time, causes frustration and we spent a lot of time on positioning components than improving functionality. It is also a waste of time as we write code that is already written and available to you.

The solution to all such problems is a framework.

A framework, or software framework, is a platform for developing software applications. It provides a foundation on which software developers can build programs for a specific platform.
-TechTerms

There are frameworks for a lot of purposes.

Today, we are going to look into the best UI framework for developing your next ReactJS project.


Material UI

React components for faster and easier web development.

Material UI

Installation

 $ npm install @material-ui/core
Enter fullscreen mode Exit fullscreen mode

Usage


 import React from 'react';
 import { Button } from '@material-ui/core';

 function App() {
   return <Button color="primary">Hello World</Button>;
}

Enter fullscreen mode Exit fullscreen mode

React Bootstrap

The most popular front-end framework. Rebuilt for React.

1200x900-1-1200x900

Installation

 $ npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

Usage


import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

 function App() {
   return <Button>Hello World</Button>;
}

Enter fullscreen mode Exit fullscreen mode

Atomize

Atomize Design System is the most advanced UI design framework that helps designers create beautiful and consistent user interfaces for the web.

Atomize React

Installation

 $ npm install atomize react-transition-group
Enter fullscreen mode Exit fullscreen mode

Usage


import { Button } from "atomize";

 function App() {
   return <Button>Hello World</Button>;
}

Enter fullscreen mode Exit fullscreen mode

Ant Design

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

Ant Design

Installation

 $ npm install antd
Enter fullscreen mode Exit fullscreen mode

Usage


import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

Enter fullscreen mode Exit fullscreen mode

Last Note

I hope this framework will help you in developing your next project that has some great UI. I would love to know "Which framework do you use?".

Thank You for reading the blog post.

Top comments (42)

Collapse
 
said_mounaim profile image
Said Mounaim

Thank you 😍 there is chakra ui too
chakra-ui.com/

Collapse
 
thisiskhandev profile image
Hassan Khan

Yeah I used in my most of the projects well recommended. ✌️

Collapse
 
eliasjnior profile image
Elias Júnior

I liked Chakra UI. I tried to use in a project, but didn't end well. For small things, like buttons and a modal, my page rank in Lighthouse was terrible. I ended up removing completely and added my own components. But the usability is great. The optimization that made me stop using it, unfortunately.

Collapse
 
itspatricku profile image
Patrick Ullrich

I am not sure if you are blaming the correct thing. I have entire sites with chakra ui with an essentially perfect 100 across light house score. Those would be created with NextJS. It's definitely not chakras fault here.

Thread Thread
 
eliasjnior profile image
Elias Júnior

Well, I will try it again this week and check if I made some mistake. I only included Button and Modal, and I had a lot of performance metrics problem. Maybe I did something wrong, and I will try it again with Nest.js ;)

Thread Thread
 
eliasjnior profile image
Elias Júnior

Well, just to update, I tested again in a project that I'm working on and fortunately looks like that everything is working very well! I didn't get any problem with performance in Lighthouse. I will start using Chakra UI again :) Thanks for the comment!

Collapse
 
ricardober93 profile image
Ricardo Bermudez Tellez

A mi tambien me encanta

Collapse
 
machineno15 profile image
Tanvir Shaikh

chakra is my personal favourite bro just after ant-design. 🤘🤘

Collapse
 
surajondev profile image
Suraj Vishwakarma

Definitely going to check

Collapse
 
andrewbaisden profile image
Andrew Baisden

Me too it's getting talked about a lot lately.

Collapse
 
endrureza profile image
Endru Reza

you might want to add some additional informations like

  • github stars
  • bundle size
  • pros and cons
  • your personal favorite
Collapse
 
kelvink96 profile image
Kelvin Kiptum Kiprop

There's Mantine too. mantine.dev/

Collapse
 
mctechie profile image
Mcvean Soans

Hey Suraj, a really good read!
Have you got any particular views on Chakra UI. It's a really good and flexible UI framework for React too!😆

Collapse
 
surajondev profile image
Suraj Vishwakarma

I haven't used but heard of it but I am going to use it in my next project

Collapse
 
pmudra profile image
Philipp Mudra

There are so many great frameworks out there that I feel overwhelmed sometimes. Some of them are listed here: github.com/enaqx/awesome-react#rea...

I recently looked into Geist which I really like.

Collapse
 
danhhuynh1tiki profile image
danh.huynh1

Thank you. I am finding.It is great

Collapse
 
surajondev profile image
Suraj Vishwakarma

Glad that you like it ☺️

Collapse
 
core_ui profile image
CoreUI

Nice one, I just miss CoreUI.io :) Have you tried it? I know it's more than a framework, but... it's always worth to give it a try, like e.g. React components here: coreui.io/react/ui-components/

Collapse
 
ascensus_mdb profile image
Michal Szymanski

Nice list!

But if you want to use the latest Bootstrap 5 with the newest React 17 I would definitely recommend MDB React ;)

mdbootstrap.com/docs/b5/react/

Collapse
 
simonguo profile image
郭小铭

React UI framework, rsuite can also be worthy of attention. Thank you.
rsuitejs.com/

Collapse
 
yourteaminindia profile image
YourTeaminIndia

Great Article!! It is always important to analyze the requirements of the client and what is the objective of the React app to be built for deciding which framework is best for your project. Read more about the best UI frameworks at: yourteaminindia.com/blog/best-reac...

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

The best is Chakra the worst MaterialUi I would not even include it here

Collapse
 
tanaydpatel profile image
Tanay Patel • Edited

I recently came to know about theme-ui it's also something to consider if you are looking forward to adding different themes to your application. It eases the process of managing the theme.

But adding styling only for specific components, I think material-UI is a go-to option.

Collapse
 
feco2019 profile image
Dimitris Chitas

Good job mate..

Collapse
 
fatehmohamed14 profile image
Fateh Mohamed 🐢

ElasticUi is great too

Collapse
 
eldasdev profile image
Shavkat Toshpulotov

Thanks for your article

🔍 If you came here from Google, why not take a look at some of our top posts?