Overview of Commercial and Open-Source UI Components for React

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • DevExtreme React Grid

    Business React components for Bootstrap and Material-UI

    The state of the Reactive components can be controlled externally (stateless mode) by enabling state persistence and time-traveling with Redux or internally (stateful mode) by the components. DevExtreme Reactive offers native support for popular React UI libraries (Material-UI, React Bootstrap). You can utilize themes provided by these libraries or create custom ones for styling React components to your liking. All UI textual data in the components can be localized. You can also speed up the integration of the DevExtreme Reactive components in your application by avoiding coding errors with TypeScript definitions. Useful resources: documentation, examples Trial version: DevExtreme Reactive Price: from $499

  • react-table

    🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

    React Table is a "headless" UI library with a small memory footprint that gives you a set of hooks for organizing data sets in a tabular format. Using this tool, you can create data tables with an extensive set of features for viewing and manipulating data. For instance, it supports sorting, global filters, row grouping, column ordering, pagination, aggregations, and many other useful functions. React Table has its own plugin system allowing you to extend the table’s functionality. Only you decide how the table looks on the screen by providing your own markup and styles. Useful resources: documentation, examples, GitHub repository Package size: 922 kB License: MIT

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • primereact

    The Most Complete React UI Component Library

    PrimeReact is a package of UI components for React engineered by PrimeTek Informatics. Buttons, menus, charts, forms, inputs, layouts - these and many other useful components will help to increase your coding productivity. PrimeReact is design-agnostic, meaning it does not depend on any specific styling library. The library ships with a variety of free themes that can be customized to meet your styling requirements. All components are responsive and touch-friendly, so users will be able to conveniently interact with them from any device. Most of PrimeReact components are native, but some of them (such as GMap) have external dependencies. You will also have to use special libraries for adding icons (PrimeIcons) and animations (React Transition Group). Useful resources: documentation, examples, GitHub repository Package size: 28.3 MB License: MIT

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Chakra UI is one more interesting solution aimed to provide you with an array of modular and themable UI components for creating modern React-based apps in a shorter time. Utilizing style props, you can easily modify the components’ styling. There are two available color modes (light and dark). Each Chakra component is composable, so you can divide it into smaller parts and put them together in a different way, thereby creating new components. Chakra UI follows modern accessibility standards, ensuring a great user experience for people with disabilities. If you experience any difficulties in using this UI library, you can count on assistance from an active Chakra community. Useful resources: documentation, video tutorials, GitHub repository Package size: 167 kB License: MIT

  • recharts

    Redefined chart library built with React and D3

    When working on data-intensive applications, it is good to have a reliable tool for visualizing complex data in a clear hierarchical structure. If you work with React.js, you should consider Recharts. It is a time-proven charting tool based on React and D3. It enables you to integrate popular chart types (Area, Pie, Radar, Bar, Skatter, etc.) into your app and customize them without any trouble. It also provides native SVG support for adding vector graphics to the web. Useful resources: documentation, examples, GitHub repository Package size: 5.27 MB License: MIT

  • react-simple-maps

    Beautiful React SVG maps with d3-geo and topojson using a declarative api.

    React Simple Maps is a tool devoted to simplifying the creation and styling of SVG maps in React. It relies on d3-geo and topojson and offers a declarative API for generating map charts. Here you get access to a collection of isolated mapping components that can be combined in different ways. React Simple Maps helps you to take care of all wearisome stuff such as panning, zooming, etc., and concentrate on making visually appealing maps. If necessary, it is also possible to add any 3rd party React libraries. Useful resources: documentation, examples, GitHub repository Package size: 74.3 kB License: MIT

  • Syncfusion React UI Components Library (Essential JS 2)

    Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

    Syncfusion React UI is a UI components library intended for building React applications and accelerating their time to market. It contains a range of UI components for addressing various development needs. Look for inputs, forms, layouts, and other standard UI elements? Not a problem. Having issues with data management? There are plenty of React grid components. Want to integrate more complex business tools such as Gantt charts, event calendars, Kanban boards faster? Syncfusion React UI will get you covered. The library is based on a modular architecture, so you can optimize the app’s bundle size by including only required components and features.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • react-chrono

    🕑 Modern Timeline Component for React

    React-Chrono can come in handy if you need a React component allowing you to visually present the sequence of events over a specific period of time. This timeline component enables you to depict events in three modes (horizontal, vertical, vertical-alternating) or autoplay the whole timeline chart in slideshow mode. It is possible to make the timeline more informative by complementing it with images, videos, icons, or any other custom items. You can navigate the timeline chart via scrolling or with a keyboard. Useful resources: GitHub repository Package size: 290 kB License: MIT

  • react-datasheet

    Excel-like data grid (table) component for React

    React-datasheet is a highly customizable React UI component that serves for generating Excel-like spreadsheets on a web page. It allows performing basic cell operations (select, cut, copy, paste) and using keyboard navigation by default. You can add more advanced capabilities, extra cell attributes, your own editors, or new behaviors with the help of custom renderers. It is important to mention that React-datasheet does not support math calculations and validation. For this purpose, you’ll have to integrate some math libraries (such as mathjs). Useful resources: GitHub repository Package size: 116 kB License: MIT

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts