5 min read · Jul 24, 2018
Originally published on ZeoLearn Blog
React (ReactJS) a library which do not need any introduction today for anyone who is working in front development space. However, more details about react js can be found here. In this article, we will explore the leading UI frameworks for Reactjs applications. These React UI component libraries have implemented the respective CSS framework practices as react components which are ready to use which make your development easier and productive.
Let’s get started…
MaterialUI is a set of React Components that Implement the Google’s Material Design Guidelines. When it comes to predefined components especially UI, one important thing we need to find is how many UI widgets are available and whether these can be customized with configurations. Material-UI has all components that you need and it is very configurable with predefined color palette and <MuiThemeProvider> component which allows you to define a custom color theme for your app.
Out of the hundreds of UI frameworks out there, Material UI is one of the best Reactjs based UI frameworks that have the most refined implementation of Material Design. With 678 contributors and 35K GitHub stars, it is one of the most popular and actively maintained library.
I have set up the sample application provided in the examples of material-ui project to stackblitz for a quick demo. Refer to the code here.
I personally feel it is not a great example to show case what is the capability of material ui but definitely a simple starter. Official website also has good documentation and demos per component which is a good source of information.
Bootstrap is one of the most popular and widely used CSS framework. It is no surprise to have the duo of React and Bootstrap. React Bootstrap is a set of React components that implementation of Bootstrap framework. React-Bootstrap currently targets Bootstrap v3 and team is actively working on Bootstrap v4.
With 204 contributors and 12K github stars it is one of the popular and actively maintained library.
Unfortunatley react-bootstrap does not provide any working project example but there are examples for every component which can be found here.
I have setup a sample application on stackblitz by compiling 2 of the independent examples from the documentation. Refer to the code here.
Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. This framework is more influenced with semantic style of HTML having meaning for every css class.Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural language like noun/modifier relationship, plurality, word order to have a link between concepts intuitively. Semantic also uses simple phrases called behaviors that trigger functionality.
Semantic UI React is the official React integration for Semantic UI
With 175 contributors and 6K github stars it is one of the popular and actively maintained library.
Unfortunatley react semantic does not provide any working project example but there are examples for every component which can be found here.
A sample application that demonstrates card component can be explored here
Another feather in Google Material Design based library. React Toolbox is a UI library that follows the concepts of Google’s Material Design and is built on top of some of the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. The library harmoniously integrates with your Webpack workflow and it’s easily customizable and very flexible.
With 219 contributors and 7k GitHub stars it is one of the popular and actively maintained library.
Official website hosts examples for all components which can be explored here. Nice thing you see here is load in playground feature which helps you explore features and capabilities right there and without any additional setup.
An enterprise-class UI design language and React-based implementation. Ant design is set of high-quality React components out of the box which are written in TypeScript. It supports browser, server-side rendering and Electron environments, has many components and even a tutorial with Create-react-app
With 443 contributors and 24k GitHub stars it is one of the popular and actively maintained library.
You can have refer to the demos here
Like bootstrap, CSS framework Foundation is another popular CSS framework. Foundation from Zurb is a very feature-rich and easily customizable library. React Foundation is a library implemented Foundation as React components.
React Foundation is basically the wrapping up of Foundation’s every part into re-usable React components following the framework’s best practices. The main objective behind developing React Foundation is ease-of-use and extensibility.
Unlike other UI libraries for developing Reactjs apps we have explored above React Foundation has very limited contributors and very low active development.
You can have refer to the demos here
