back to listing index

Best UI Frameworks for your new React.js App. – Hacker Noon

[web search]
Original source (hackernoon.com)
Tags: javascript frontend framework
Clipped on: 2017-09-06

Image (Asset 1/25) alt=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 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

The official Semantic-UI-React integration

Personally, I think it’s the best UI framework for React.

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

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

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

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

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

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

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

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.


...
Image (Asset 2/25) alt=
Image (Asset 3/25) alt=
Image (Asset 4/25) alt=
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
Image (Asset 5/25) alt=
Show your support

Clapping shows how much you appreciated Vladimir Metnew’s story.

  • Image (Asset 6/25) alt=We built Blackship with it.

  • Conversation with Vladimir Metnew.
    Image (Asset 7/25) alt=https://getuikit.com/
    It looks beautiful and is quite easy to use, i’m not sure how it compares to all of these you’ve mentioned above.

    Image (Asset 8/25) alt=the best one I’ve ever seen. Material design. all sass variables and mixins documented really flexible library. Definitely has to be at this list

    Image (Asset 9/25) alt=We don’t need so many almost similar frameworks that follows single Material Style, ship almost identical components, and have same colors.
    Take a look at this list. Only in this list exist more than 6 UI framework those…

    Image (Asset 10/25) alt=Yes, if I use react-toolbox, then I have to include support for CSS-Modules in my Webpack, but it doesn’t mean that I have to write my code only with CSS-Modules. With tools like Css-modules and JSS we don’t import unused CSS styles.
    Also, why you decided to…

    Conversation with Vladimir Metnew.
    Image (Asset 11/25) alt=