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.

Discussion (37)

Collapse
said_mounaim profile image
Said Mounaim

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

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 Author

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
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
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 Author

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

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
tanaydpatel profile image
Tanay Patel • Edited on

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
ivanjeremic profile image
Ivan Jeremic

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

Collapse
imprabhusk profile image
prabhusk

Chakra UI is my preference.

Collapse
surajondev profile image
Suraj Vishwakarma Author

I am also going to try

Collapse
the22mastermind profile image
Bertrand Masabo

Interesting stuff. I'll definitely give Atomize a shot in my next project. Thank you for sharing.

Collapse
gabrielizalo profile image
Gabriel Porras

Here there are some other ones: github.com/gabrielizalo/Awesome-CS...

Collapse
chandez profile image
Chander Valle

I think the old and good Prime deserve one place on the list.
primefaces.org/primereact/
:D

Collapse
anubra266 profile image
Abraham Anuoluwapo

To all the Chakra UI Fans.
You'll probably like Choc UI
Visit Site

Collapse
heatxel profile image
Danz

How do you mix framework (react), documentation (like docusaurus or another one), microfrontend (like bit), testing (like sonar linter or sonar integrated) and testing (like jest or enzyme)? which is your favourite mix?

Collapse
techguy profile image
Techguy

Hey Suraj, a really good read! Syncfusion Component missing here syncfusion.com/react-ui-components

Collapse
gibbok profile image
GibboK

Give a try to

github.com/Actyx/industrial-ui

if you need to develop a Shop Floor Application or Point of Sales one.

Collapse
feco2019 profile image
Dimitris Chitas

Good job mate..

Collapse
gracie profile image
Grace Chiamaka

I love Ant Design. Very easy to use

Collapse
timo_ernst profile image
Timo Ernst

Can also highly recommend framework7-react. Includes themes for Material, iOS and desktop.
framework7.io/react/

Collapse
systemx profile image
Mohammed Fellak

Great choices

Collapse
surajondev profile image
Suraj Vishwakarma Author

Thank you

Collapse
jdnichollsc profile image
J.D Nicholls

Try Ionic React and Web Components, agnostic for the win! <3

Collapse
eldasdev profile image
Shavkat Toshpulotov

Thanks for your article

Collapse
iamgifted profile image
Gift Opia

I’ve used a couple and I don’t think react-bootstrap should be one of the best.

Collapse
fatehmohamed14 profile image
Fateh Mohamed 🐢

ElasticUi is great too

Collapse
kamalhossain profile image
Kamal Hossain

I have used Ant Design, which is awesome.