Top 23 JavaScript UI Component Projects

• Semantic UI

  1 49,615 0.0 JavaScript

  Semantic is a UI component framework based around useful principles from natural language.

  

  Project mention: 10 UI Library to Make Your React App Development Faster | dev.to | 2021-08-17

  Semantic is a UI component framework based around useful principles from natural language.

• Swiper

  22 28,788 9.8 JavaScript

  Most modern mobile touch slider with hardware accelerated transitions

  Project mention: Slider/carousel library recommendations | reddit.com/r/Frontend | 2021-10-01

  Swiper is far and away the most modern and modular library in that landscape. The configuration API is extremely granular, there's likely an option for any slider behavior you can think of. In your case you can probably just import one of the slide effects:

• Syncfusion

  syncfusion.com

  sponsored

  Build stunning web applications quickly using Syncfusion JavaScript UI controls.. The Syncfusion JavaScript suite offers more than 65 cross-platform, responsive, and lightweight JS/HTML5 UI controls for building modern web applications.

  

• react-beautiful-dnd

  14 25,176 6.9 JavaScript

  Beautiful and accessible drag and drop for lists with React

  

  Project mention: How to control the elements with react.js like this video ? | reddit.com/r/reactjs | 2021-10-09

  Here you go. Have fun :-)

• sortablejs

  4 23,252 5.5 JavaScript

  Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

  

  Project mention: Making TinyMCE draggable with Stimulus | dev.to | 2021-10-05

  I used a Stimulus controller I named drag_controller.js to take care of the drag and drop using Sortable (install with yarn add sortablejs), but other packages may work just as well. This is imported at the top of the controller.

• react-virtualized

  10 22,571 4.4 JavaScript

  React components for efficiently rendering large lists and tabular data

  Project mention: React Virtualization - react-window vs react-virtuoso | dev.to | 2021-08-26

  react-virtualized is the elder and bulkier brother (same author) of react-window. It contains more components, features, and has a much larger package size compared to the lighter react-window. The package comes with 2D components, features like infinite scroll, autosizer, etc.

• react-table

  18 15,267 4.5 JavaScript

  ⚛️ Hooks for building fast and extendable tables and datagrids for React

  Project mention: How do I code up a Notion-like table in React? | reddit.com/r/react | 2021-10-11

  You can definitely build this using react-table. There are several examples in their documentation that will cover most of your requirements. Just a note that the library is utilized with more advanced concepts of React, like prop getters, so you may be leveling up your core knowledge and usage of React in the process.

• react-dates

  1 11,624 2.8 JavaScript

  An easily internationalizable, mobile-friendly datepicker library for the web

  

  Project mention: react-dates: disabling the default calendar popup | reddit.com/r/reactjs | 2021-07-14

  `ReactDateRangePicker`, gives it's own date picker to use(see ss: https://i.stack.imgur.com/6mkER.png)

• Scout APM

  scoutapm.com

  sponsored

  Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

  

• react-window

  13 11,383 1.9 JavaScript

  React components for efficiently rendering large lists and tabular data

  Project mention: My site metrics are really slow, can anyone help me? | reddit.com/r/nextjs | 2021-10-04

  Also, consider using react-lazyload or react-window or next.js dynamic import to handle your excessive dom size.

• evergreen

  10 11,185 8.2 JavaScript

  🌲 Evergreen React UI Framework by Segment

  

  Project mention: Best UI Frameworks for React.js | dev.to | 2021-10-11

  More info

• marko

  11 10,682 9.1 JavaScript

  A declarative, HTML-based language that makes building web apps fun

  

  Project mention: MPA, SPA and Partial Hydration | dev.to | 2021-09-15

  This concept proposes hydrating only parts of the whole site - parts where we needs interactivity, this in turn help us ship less JavaScript to the client by only hydrate demanded components, thus improving page load time & time to interactive. As of now only some of static sites frameworks support this out of the box (which I know of): Astro & Marko.

• react-color

  1 10,130 0.8 JavaScript

  :art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

  Project mention: I’m looking for a certain library for colors | reddit.com/r/webdev | 2021-08-18

  depends on the environment/framework you would use. Eg. I use https://casesandberg.github.io/react-color/ as color selector for react.

• downshift 🏎

  6 9,996 6.3 JavaScript

  🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

  

  Project mention: react-select VS downshift 🏎 - a user suggested alternative | libhunt.com/r/react-select | 2021-10-04

  I think `downshift` could be considered as the best react-select alternative if you are looking to have more fine-grained control over your component or are looking for a smaller bundle size.

• react-slick

  3 9,914 3.9 JavaScript

  React carousel component

  Project mention: Awesome Things Related To React Hooks 😍 | dev.to | 2021-09-23

  React Slick - React carousel component. One of the best sliders out there to showcase anything.

• react-sortable-hoc

  3 9,625 5.2 JavaScript

  A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

  Project mention: Please give a solution to this | reddit.com/r/reactjs | 2021-07-29

  Package link:- https://www.npmjs.com/package/react-sortable-hoc

• victory

  7 9,126 9.5 JavaScript

  A collection of composable React components for building interactive data visualizations

  

  Project mention: Top 5 React chart libraries | dev.to | 2021-09-24

  Like many other React chart libraries on the list, Victory was built with React and D3. It comes with a wide variety of charts out of the box that are fully customizable.

• react-dropzone

  8 8,509 4.9 JavaScript

  Simple HTML5 drag-drop zone with React.js.

  

  Project mention: Dropzone UI: the new way of providing Drag and Drop File Uploads in React app. | dev.to | 2021-09-25

  In standard HTML5 you can perform file uploads through . Additionally there are packages like dropzone and react-dropzone that can handle this task very well. However, inspired in the last ones, there was created something new and more powerful: dropzone-ui.

• react-text-mask

  0 8,075 0.3 JavaScript

  Input mask for React, Angular, Ember, Vue, & plain JavaScript

  

• react-markdown

  19 7,768 8.0 JavaScript

  Markdown component for React

  

  Project mention: Adding code snippets to static markdown in Next.js using react-syntax-highlighter | dev.to | 2021-09-23

  In order to allow for code highlighting, we want to be using the React Markdown package to render our markdown. The reason for this is that we can set the renderers property to use our custom code highlighting component.

• react-draggable

  2 7,050 5.2 JavaScript

  React draggable component

  

  Project mention: What libraries would you use to build something like Google Slides? I mean drag, drop, resize movable rich text boxes etc. | reddit.com/r/webdev | 2021-05-15

  Maybe it's a collection of libraries. Some might be https://interactjs.io/ https://www.npmjs.com/package/react-draggable etc.

• react-modal

  6 6,611 6.4 JavaScript

  Accessible modal dialog component for React

  

  Project mention: While building a webpart, I am struggling to create a form that covers the entire page area | reddit.com/r/u_ricknevergivesup | 2021-10-15

  For testing, the app is has a small div that contains a single Button, which opens a form in the center of the page (position absolute). For the Form component, I created using div, form, and even react-modal (https://www.npmjs.com/package/react-modal) library (I switched back and forth during testing).

• tailblocks

  17 6,149 4.1 JavaScript

  Ready-to-use Tailwind CSS blocks.

  Project mention: 10 Open Source Libraries for Tailwind CSS Components | dev.to | 2021-10-14

  With a drag-and-drop interface, Tailblocks provides a unique open source generator for beautiful web pages. Over 60 CSS blocks are ready to use. Fully responsive with dark mode support.

• react-map-gl

  6 6,148 8.1 JavaScript

  React friendly API wrapper around MapboxGL JS

  

  Project mention: When to use react-map-gl or plain mapbox-gl in React app? | reddit.com/r/gis | 2021-10-13

  I'm working on a React app with a mapbox component and am trying to understand the use case for react-map-gl vs the examples on the Mapbox site that just use mapbox-gl. From the React GitHub issues they mention this in regards to performance -

• react-datepicker

  8 6,065 9.5 JavaScript

  A simple and reusable datepicker component for React

  

  Project mention: 💡 react-datepicker | reddit.com/r/reactjs | 2021-07-04

Index

Sponsored

Run Linux Software Faster and Safer than Linux with Unikernels

github.com/nanovms