paint-brush
Best UI Frameworks for your new React.js App.by@vladimirmetnew
321,290 reads
321,290 reads

Best UI Frameworks for your new React.js App.

by Vladimir MetnewApril 25th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Build your apps only with best UI frameworks.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Best UI Frameworks for your new React.js App.
Vladimir Metnew HackerNoon profile picture

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