JavaScript UI Components

Open-source JavaScript projects categorized as UI Components | Edit details

Top 23 JavaScript UI Component Projects

  • GitHub repo Semantic UI

    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.

  • GitHub repo Swiper

    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

    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.

  • GitHub repo react-beautiful-dnd

    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 :-)

  • GitHub repo sortablejs

    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.

  • GitHub repo react-virtualized

    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.

  • GitHub repo react-table

    ⚛️ 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.

  • GitHub repo react-dates

    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

    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.

  • GitHub repo react-window

    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.

  • GitHub repo evergreen

    🌲 Evergreen React UI Framework by Segment

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

    More info

  • GitHub repo marko

    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.

  • GitHub repo react-color

    :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.

  • GitHub repo downshift 🏎

    🏎 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.

  • GitHub repo react-slick

    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.

  • GitHub repo react-sortable-hoc

    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

  • GitHub repo victory

    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.

  • GitHub repo react-dropzone

    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.

  • GitHub repo react-text-mask

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

  • GitHub repo react-markdown

    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.

  • GitHub repo react-draggable

    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.

  • GitHub repo react-modal

    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).

  • GitHub repo tailblocks

    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.

  • GitHub repo react-map-gl

    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 -

  • GitHub repo react-datepicker

    A simple and reusable datepicker component for React

    Project mention: 💡 react-datepicker | reddit.com/r/reactjs | 2021-07-04
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-10-15.

Index

What are some of the best open-source UI Component projects in JavaScript? This list will help you:

Project Stars
1 Semantic UI 49,615
2 Swiper 28,788
3 react-beautiful-dnd 25,176
4 sortablejs 23,252
5 react-virtualized 22,571
6 react-table 15,267
7 react-dates 11,624
8 react-window 11,383
9 evergreen 11,185
10 marko 10,682
11 react-color 10,130
12 downshift 🏎 9,996
13 react-slick 9,914
14 react-sortable-hoc 9,625
15 victory 9,126
16 react-dropzone 8,509
17 react-text-mask 8,075
18 react-markdown 7,768
19 react-draggable 7,050
20 react-modal 6,611
21 tailblocks 6,149
22 react-map-gl 6,148
23 react-datepicker 6,065
Find remote jobs at our new job board 99remotejobs.com. There are 34 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.