Best React UI Component Libraries And Frameworks · Pt. 2

March 15, 2018 0 Comments

Best React UI Component Libraries And Frameworks · Pt. 2

 

 

A while ago we published Part 1 of the list with some of the best React UI libraries for 2018, including Material-UI, React-bootstrap, React Toolbox, Belle, Grommet, Khan’s Components, Material Web, Ant Design, Semantic UI, Onsen UI and React Virtualized.

React’s popularity on NPM keeps on rising

On popular demand, we’re expanding the list and adding 11 more great libraries for React components to complete a full knowledge base for the best component libraries available for React out there.

Popular libraries on both lists can also be combined with Bit. Using Bit, you can organize components from different libraries into a dynamic collection, share them with your team and easily sync them between projects.

Bit also speeds your workflow with live rendering (see example), isolated testing environment and 2-way code changes from different projects.

A React Hero component with Bit

With nearly 9k stars and 100 contributors this library is a collection of React UI components with a wide selection of common elements, patterns, and interactions on the web. It is optimized for building complex, data-dense web interfaces for desktop applications. Components are build with TypeScript and stlying is done with SaaS to provide rapid development and flexibility.

Blueprint React components

Although “only” at 1.6k stars, this library is claimed by many to be exceptional and is commonly loved and some claim it’s one of the best out there, providing a beautiful kit for building a web app with Google’s Material Design with very highly customizable themes and styling (Sass). Worth trying out.

React MD Subheaders component

This 4k stars popular library provides React bootstrap 4 components (not depending on Bootstrap JS itself) favoring composition and control. Note that Your content is expected to be composed via props.children rather than using named props to pass in Components. It’s an interesting option to consider.

Reactstrap buttons

Although only at 300 stars, this library provides over 60 components with a variety of beautiful themes that provide different UI functionalities including data visualization, text editing and more which are also optimized for mobile. Here is a quick-start example based on a create-react-app project.

PrimeReact Polar Area chart component

With 4k stars this UI and CSS framework is still under development but already supports 4 different browsers and is working to implement inline stylings. The project was build to provide functional and unopinionated components that are useful on their own or together, with an unobtrusive default style and flexible theme capabilities.

Elemental UI modal component

At over 3.5k stars and 60 components Rebass is a UI library & design system, built with styled-components and styled-system (with no external CSS dependencies) which aims to reduce the need to write CSS in your responsive web applications. Max Stoiber crowned it as “one of the best libs out there”.

Rebass UI React components

Atlasssian’s official React UI kit is the technical implementation of the Atlassian Design Guidelines (ADG). It’s a collection of reusable components that can be downloaded independently into your projects. Each component is also independently versioned and published to npm. Here is a package list of the individual components.

Atlaskit multi-select component

Fabric is Microsoft’s React component library for Office and Office 365. It’s a responsive, mobile-first collection of robust components designed according the Office Design Language. These components are used in SharePoint and in Office add-ins. Here is a quick tutorial for building a simple React App.

Fabric’s Nav-Bar component

At over 7k stars this popular library aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components and can be used in any JS powered project. The project is looking for contributors.

React desktop’s window component for macOS

The goal of this library is to wrap every part of Foundation into re-usable React components following the framework’s best practices, focusing on ease-of-use and flexibility using stateless components whenever possible. All components include tests, and the library is project active development.

React foundation’s button component

This library contains React components according to IBM’s Carbon design system and its components. Note that these components don’t import any of the styles themselves, so you’ll have to use the scss or css from carbon-components to bring in the component’s styling.

Carbon’s React Page Header component

This library is a React implementation for the china’s popular Amaze-UI cross-platform framework. Although it hasn’t been actively maintained for a while, some people still fancy this library.

Amaze-UI React thumbnail component

This Chinese React UI library comes with a surprisingly clean and beautiful design for over 40 components used at YouZan, with TypeScript support, customizable themes and over 90% test coverage. Interesting surprise.

Zent React menu component

This React UI library includes over 40 components designed for an enterprise app, focusing on performance for back-end apps with emphasize on components like form and table while data is automatically bound to views.

UXCore React table component

This UI framework for Windows implements Microsoft’s UWP and Fluent designs, with p an extensive library of controls for UI visual representation as well as containers for other controls or content, such as images and media.

React UWP components

This library is based on one thing and one thing only: making cool loading spinners. And so it does, containing nearly 20 of the coolest spinners around. Note that this project too wasn’t developed for the past two years or so.

Halogen neat loaders

React components help us build applications with components as reusbale Lego bricks. Popular libraries and UI frameworks can help you speed development with a pre-made set of components for your app. Great tools like Bit and StoryBook can help you master your development workflow. All that’s left for you to do build the next great app with React.js.


Tag cloud