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.
Installation
$ npm install @material-ui/core
Usage
import React from 'react';
import { Button } from '@material-ui/core';
function App() {
return <Button color="primary">Hello World</Button>;
}
React Bootstrap
The most popular front-end framework. Rebuilt for React.
Installation
$ npm install react-bootstrap bootstrap
Usage
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
function App() {
return <Button>Hello World</Button>;
}
Atomize
Atomize Design System is the most advanced UI design framework that helps designers create beautiful and consistent user interfaces for the web.
Installation
$ npm install atomize react-transition-group
Usage
import { Button } from "atomize";
function App() {
return <Button>Hello World</Button>;
}
Ant Design
A design system for enterprise-level products. Create an efficient and enjoyable work experience.
Installation
$ npm install antd
Usage
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
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.
Oldest comments (41)
Great choices
Thank you
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!😆
I haven't used but heard of it but I am going to use it in my next project
Thank you 😍 there is chakra ui too
chakra-ui.com/
Definitely going to check
Me too it's getting talked about a lot lately.
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.
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.
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 ;)
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!
A mi tambien me encanta
chakra is my personal favourite bro just after ant-design. 🤘🤘
Yeah I used in my most of the projects well recommended. ✌️
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/
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.
I think the old and good Prime deserve one place on the list.
primefaces.org/primereact/
:D
I have used Ant Design, which is awesome.
The best is Chakra the worst MaterialUi I would not even include it here
Good job mate..
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/
I’ve used a couple and I don’t think react-bootstrap should be one of the best.
you might want to add some additional informations like
Try Ionic React and Web Components, agnostic for the win! <3
React UI framework, rsuite can also be worthy of attention. Thank you.
rsuitejs.com/
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.