Build your apps only with best UI frameworks.
material-ui - React Components that Implement Google's Material Design.github.com
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 UI Components for OS X El Capitan and Windows 10reactdesktop.js.org
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 — 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.
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.
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.
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…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.
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.
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.
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.
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!