Best UI Frameworks for your new React.js App.

Build your apps only with best UI frameworks.

Material-UI

callemall/material-ui_material-ui - React Components that Implement Google's Material Design._github.com

A Set of React Components that ImplementGoogle’s Material Design

Also, It’s one of the first UI kits for React. Material-UI has all components that you need_(and even more)_. Material-UI is very configurable with predefined color palette and<MuiThemeProvider> that allows you to define a custom color theme for your app.

Personally, I don’t like it. Material UI had performance problems, but according to 3.0 release performance was improved.

React Desktop

React Desktop | React UI Components for OS X El Capitan and Windows 10React UI Components for OS X El Capitan and Windows 10reactdesktop.js.org

React UI Components for MacOS Sierra and Windows 10.

I’m sure you know about Electron framework. If you’re interested in UI components for cross-platform desktop apps then React-Desktop is for you. You can find UI components for Mac OS and Windows 10 both.

Semantic-UI-React

Semantic-Org/Semantic-UI-React_The official Semantic-UI-React integration_github.com

The official Semantic-UI-React integration

Semantic-UI-React — is the official clone of Semantic-UI for React. It has almost all most used components from Semantic-UI, but also it has a very good Declarative API, shorthand props for React components, and this UI framework is jQuery-free.

Also, I have a starter(with demo) built with React-Semantic-UI, Webpack, and other awesome stuff.

Ant-design

ant-design/ant-design_ant-design - 🐜 A UI Design Language_github.com

An enterprise-class UI design language and React-based implementation.

From official docs:

• An enterprise-class UI design language for web applications.
• A set of high-quality React components out of the box.
• Written in TypeScript with complete define types.
• A npm + webpack + dva front-end development workflow.

It supports browser, server-side rendering and Electron environments, has many components and even a tutorial with Create-react-app.

Ant-design demo here.

Blueprint

palantir/blueprint_blueprint - A React-based UI toolkit for the web_github.com

From docs:

It is optimized for building complex, data-dense web interfaces for desktop applications. If you rely heavily on mobile interactions and are looking for a mobile-first UI toolkit, this may not be for you.

Written in TypeScript, has good documentation. Docs: It includes many (30+) React components covering all the basic bases, from buttons to form controls to tooltips and trees. It also includes CSS styles for every component and the tools to style your own components and apps with Sass and Less variables, an elegant color palette, and 300+ UI icons in two sizes.

React-Bootstrap

react-bootstrap/react-bootstrap_react-bootstrap - Bootstrap 3 components built with React_github.com

Bootstrap 3 components built with React.

From official docs: 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, via Facebook’s React.js framework. Briefly, It’s old good known Bootstrap components written in React.

React-Toolbox

react-toolbox/react-toolbox_react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS…_github.com

A set of React components implementing Google’s Material Design specification with the power of CSS Modules

Have you heard about CSS Modules? React-Toolbox relies on it. It allows you to use only required CSS without using tools like Purify-CSS. Besides, React-Toolbox is highly-customizable framework with 3o+ components out-of-box.

Grommet

grommet/grommet_grommet - The most advanced UX framework for enterprise applications._github.com

The most advanced UX framework for enterprise applications.

I can’t call Grommet as a UX framework, it’s much bigger. A lot of UX components and utils written with React + own grommet-cli +“getting started” guide + prebuilt templates + good docs + integration with Sketch = Grommet.

Fabric

OfficeDev/office-ui-fabric-react_office-ui-fabric-react - React components for building experiences for Office and Office 365._github.com

React components for building experiences for Office and Office 365.

In last few years Microsoft supported and built many open-source projects — Angular 2, TypeScript, VS Code(based on Electron), and Fabric.

Fabric is the official Office library that is written in TypeScript, has “getting started” guide, blog, official palette and fonts, and all components that you need in your project.

Microsoft amazed me. Thanks @aslamhadi for this link.

React-md

mlaursen/react-md_react-md - React material design_github.com

Yet another one library which implements Material Design. But wait, give it a chance. React-md can be easily customized to your needs, is good documented and has a “getting started” guide, has many common Material components. There is only one issue — library is maintained and developed by one contributor. If you want contribute to open-source project — React-md may be a good choice for it.Thanks to Nikita Sukhov for recommendation of this library.

Github: https://github.com/MetnewTwitter: https://twitter.com/coldlinecall