Compare React UI Frameworks

Intro

Got to pick a UI framework for work. The hopeful gain are unified beautiful design and quicker development. The possible loss could be performance, bugs, learning the framework, risk of unsupported in future, etc.

Where I found the candidates:

• Existing UI libraries to use with React.js?
• awesome-react
• Google

I will only look at the frameworks having GitHub stars > 100.

Quick conclusion: There is no super solid framework there, but Material UI and React toolbox are probably more ready.

Selection criteria

• Basics:
  • [ ] dropdownlist / select
  • [ ] date picker
  • [ ] time picker
  • [ ] tab
  • [ ] slide in menu
  • [ ] dialog / modal / pop up window
  • [ ] dropdown menu
  • [ ] table
  • [ ] responsive
• Extra:
  • [ ] loading indicator
  • [ ] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [ ] theme
• [ ] tested working for new browsers (Chrome, IE11, IOS)
• [ ] use ES6 and class syntax
• [ ] compatible with React 0.14 (ref)
• [ ] actively updated and supported
• [ ] should not have bug that broke the whole software reported in GitHub issues
• [ ] open source

Candidates

NOTE: The GitHub data is collected on Nov 11, 2015.

• Material UI, GitHub, 11715 stars, 222 contributors, (22 contributors >10 commits)
• React toolbox, GitHub, 1981 stars, 7 contributors, (3 contributors >10 commits)
• React Bootstrap, GitHub, 3869 stars, 127 contributors, (6 contributors >10 commits)
• Grommet, GitHub, 188 stars, 24 contributors, (8 contributors >10 commits)
• Elemental UI, GitHub, 1755 stars, 16 contributors
• Belle, GitHub, 1060 stars, 12 contributors
• React Components by Khan Academy, GitHub, 574 stars, 17 contributors

Not tested:

• TouchstoneJS, GitHub, 2626 stars, 10 contributors. The demo and doc is under development.
• REACT UI, GitHub, 294 stars, 1 contributor. Only 1 contributor, a bit worried.
• Reapp, GitHub, 2970 stars, 14 contributors. It’s intended for hybrid apps, no desktop demo, lacks components.

Here are some Chinese frameworks:

• [Amaze UI] (http://amazeui.org/react/components), GitHub 474 stars, 5 contributors
• UXCore, GitHub
• Ant Design by Ant Financial (Alibaba), GitHub, 1549 stars, 36 contributors

Go through

Material UI

• material-ui
• GitHub

• 11715 stars, 222 contributors

• Basics:

  • [X] dropdownlist / select
  • [X] date picker
  • [X] time picker
  • [X] tab
  • [X] slide in menu
  • [X] dialog / modal / popup window
  • [X] dropdown menu
  • [X] table
  • [X] responsive
• Extra:
  • [X] loading indicator
  • [ ] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [X] theme (partly support)
• [X] tested working for new browsers (Chrome, IE11, IOS) (ripple effect appear twice in iPhone, ripple effect not working in IE 11)
• [ ] use ES6 and class syntax
• [X] compatible with React 0.14
• [X] actively updated and supported
• [X] should not have major bug reported in GitHub issues ()
• [X] open source

This is almost the most popular one, and it looks really beautiful with material design.

React toolbox

• React toolbox
• GitHub

• 1981 stars, 7 contributors

• Basics:

  • [X] dropdownlist / select
  • [X] date picker
  • [X] time picker
  • [X] tab
  • [X] slide in menu
  • [X] dialog / modal / popup window
  • [X] dropdown menu
  • [X] table
  • [X] responsive (not sure)
• Extra:
  • [ ] loading indicator
  • [X] dropdownlist / select with search/filter function (autocomplete)
  • [X] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [X] theme (partly supported)
• [ ] tested working for new browsers (Chrome, IE11, IOS) (“Autocomplete” page’s playground will get ‘TypeError’ using IE 11)
• [X] use ES6 and class syntax
• [ ] compatible with React 0.14 (not sure)
• [X] actively updated and supported
• [X] should not have major bug reported in GitHub issues
• [X] open source

Material Design, CSS Modules, ES6 syntax, seems promising.

React Bootstrap

• React Bootstrap
• GitHub

• 3869 stars, 127 contributors

• Basics:

  • [ ] dropdownlist / select
  • [ ] date picker
  • [ ] time picker
  • [X] tab
  • [ ] slide in menu
  • [X] dialog / modal / popup window
  • [ ] dropdown menu
  • [ ] table
  • [ ] responsive (not sure)
• Extra:
  • [ ] loading indicator
  • [ ] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [ ] theme
    (the following is not tested due to too few components)
• [ ] tested working for new browsers (Chrome, IE11, IOS) (“Autocomplete” page’s playground will get ‘TypeError’ using IE 11)
• [ ] use ES6 and class syntax
• [ ] compatible with React 0.14 (seems so)
• [ ] actively updated and supported
• [ ] should not have major bug reported in GitHub issues
• [ ] open source

Grommet

• Grommet
• GitHub

• 188 stars, 24 contributors

• Basics:

  • [X] dropdownlist / select
  • [X] date picker
  • [ ] time picker
  • [X] tab
  • [X] slide in menu
  • [X] dialog / modal / popup window
  • [X] dropdown menu
  • [X] table
  • [X] responsive
• Extra:
  • [X] loading indicator
  • [ ] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [X] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [ ] theme
• [ ] tested working for new browsers (Chrome, IE11, IOS) (“tab” is not working in Chrome)
• [ ] use ES6 and class syntax
• [X] compatible with React 0.14
• [ ] actively updated and supported (lots of issues with no response)
• [ ] should not have major bug reported in GitHub issues ()
• [X] open source

Not recommend, although it is actively updated, it seems that it lacks support and has bugs.

Elemental UI

• Elemental UI
• GitHub

• 1755 stars, 16 contributors

• Basics:

  • [X] dropdownlist / select
  • [ ] date picker
  • [ ] time picker
  • [ ] tab
  • [ ] slide in menu
  • [X] dialog / modal / popup window
  • [ ] dropdown menu
  • [X] table
  • [X] responsive
• Extra:
  • [X] loading indicator
  • [ ] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [ ] theme
    (the following is not tested due to too few components)
• [ ] tested working for new browsers (Chrome, IE11, IOS)
• [ ] use ES6 and class syntax
• [ ] compatible with React 0.14
• [ ] actively updated and supported (Latest commit 27 days ago)
• [ ] should not have major bug reported in GitHub issues ()
• [ ] open source

This framework has a bootstrap-like look, but it contains too few components.

Belle

• Belle
• GitHub

• 1060 stars, 12 contributors

• Basics:

  • [X] dropdownlist / select
  • [X] date picker
  • [ ] time picker
  • [ ] tab
  • [ ] slide in menu
  • [ ] dialog / modal / popup window
  • [ ] dropdown menu
  • [ ] table
  • [ ] responsive (not sure)
• Extra:
  • [ ] loading indicator
  • [X] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [X] theme
    (the following is not tested due to too few components)
• [ ] tested working for new browsers (Chrome, IE11, IOS)
• [ ] use ES6 and class syntax
• [ ] compatible with React 0.14
• [ ] actively updated and supported
• [ ] should not have major bug reported in GitHub issues ()
• [ ] open source

This framework has a nice flat material-like look, but it contains too few components.

React Components by Khan Academy

• React Components by Khan Academy
• GitHub

• 574 stars, 17 contributors

• Basics:

  • [X] dropdownlist / select
  • [ ] date picker
  • [ ] time picker
  • [ ] tab
  • [ ] slide in menu
  • [X] dialog / modal / popup window
  • [ ] dropdown menu
  • [ ] table
  • [ ] responsive (not sure)
• Extra:
  • [ ] loading indicator
  • [ ] dropdownlist / select with search/filter function (autocomplete)
  • [ ] multi-select
  • [ ] chart
  • [ ] table with sorting, filtering
  • [ ] gridster layout
  • [ ] theme
    (the following is not tested due to too few components)
• [ ] tested working for new browsers (Chrome, IE11, IOS)
• [ ] use ES6 and class syntax
• [ ] compatible with React 0.14
• [ ] actively updated and supported
• [ ] should not have major bug reported in GitHub issues ()
• [ ] open source

The development seems very organized and professional. But it contains too few components. Some of them are mixins.

NOTE: It contains:

• drag and drop
• Sortable

Conclusion

There are many more frameworks like Semantic UI which are more focused on CSS, but they needs wrapping is the component needs JS. It turns out clearly after the compare: Material UI and React toolbox are the ones that are ahead.

Ant Design by Ant Financial (Alibaba), GitHub, 1549 stars, 36 contributors
This framework gets lots of attention in China because of the team’s technical background.