Top 10 React UI Libraries (UI Components)


React is no doubt one of the most popular JavaScript frameworks in the world. We can use it to create modern and beautiful user interface (ui) for web, mobile, and even desktop applications. React is not CSS framework, so it comes without any styles or ready-to-use ui components. Fortunately, React ecosystem is so huge, there are dozens open source projects that provide us React ui library or ui components (I prefer call it as ui components).
People are often confused which one should they use in their projects. If you are looking for the best react ui library, here are my top list base on GitHub contributors and stars on December 16th, 2017.

10. rebass

rebass

Rebass is Functional React UI component library, built with styled-components.

9. elemental

elemental
Elemental UI is A UI Toolkit for React.js Websites and Apps.

8. grommet

grommet
Grommet components greatly simplify the task of creating clear, well-designed, responsive experiences. 

7. blueprint

blueprint
Blueprint is a collection of React UI components that cover the majority of the common interface elements, patterns, and interactions on the web.

6. semantic-ui-react

Semantic UI
Semantic UI React is the official React integration for Semantic UI.

5. office-ui-fabric-react

Fabric

Fabric’s components help you get buttons, navigation, and more that look like Office quickly and easily. 

4. react-toolbox

React Toolbox
React Toolbox is a set of React components that implements Google Material Design specification.

3. react-bootstrap

React Bootstrap

React-Bootstrap is a library of reusable front-end components. You'll get the look-and-feel of Twitter Bootstrap, but with much cleaner code.

2. ant-design

Ant Design
Ant Design is a React UI library that contains a set of high quality components and demos for building rich, interactive user interfaces by following the Ant Design specification.

1. material-ui

Material UI
Material-UI is a set of React components that implement Google's Material Design. I'm currently using it in my projects (melisa.id is my latest project that use this react ui library).

There are so many React ui libraries out there,  but those 10 projects are the most popular among the React community. Which one is your favourite? Not in the list? Let me know by leaving your comments below.

Thank You..

Comments

Post a Comment

Popular Posts

React JS Tutorial : React Router Redux Todo App

Image
React Router and Redux are the most common libraries in React JS ecosystem. They are not officially come with Facebook's React JS, but they are always inside my project's dependencies. In this blog post we will try to create a simple todo app using React Router and Redux. We will also use Material-UI ( Top 10 React JS UI Components ) and lodash uniqueId to generate id for todo item. What we need in this React JS Tutorial: create-react-app (you can install it using npm i -g create-react-app or yarn global add create-react-app ) code editor (I always use Visual Studio Code ) browser (I use Google Chrome) Mockups When we develop  React JS applications, it would be better if we start by designing the application's mockups. The app will have 3 pages: Home Todo, Edit Todo, and Not Found. 1. Home Todo (path: / ) 2. Edit Todo (path: /edit/:id ) 3. Not Found (path: /:something-not-listed-in-the-router ) Bootsrap New Project  First, let's bo
Read more

How To Deploy Single Page Applications Bootsraped by Create React App to surge.sh

Image
Have you heard about surge.sh ? If someone ask me that question 2 days ago, my answer, for sure, is "Nope".  I just found this surge.sh yesterday when I tried to publish a simple todo list app built with React JS, React Router and Redux to GitHub project pages. Unfortunately, the application router didn't work smoothly under  https://{username}.github.io/{repo-name}. Instead of changing my working code, I decided to find other free static hosting providers. I found surge.sh somewhere on the create-react-app guide. I install it globally using npm, then I typed surge command under the project directory, and boom the app is online on a surge.sh subdomain. It is fast and easy to deploy our static file to surge.sh. So, In this React JS tutorial, I will show how effective deploying our React JS app to surge.sh. Installing the surge.sh cli We will install it locally inside our project dev dependecies using npm: npm i surge --save-dev or yarn: yarn add surge --dev . I
Read more