JavaScript UI Components

Open-source JavaScript projects categorized as UI Components

Top 23 JavaScript UI Component Projects

  • GitHub repo Semantic UI

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

  • GitHub repo react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    Project mention: Pretty happy with how this menu turned out. Beautiful-React-DnD is amazing! | reddit.com/r/reactjs | 2021-05-02

    https://github.com/atlassian/react-beautiful-dnd, there’s some good tutorials on how to get it working if you google it. Takes a bit of boilerplate to get it implemented.

  • GitHub repo sortablejs

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

  • GitHub repo react-virtualized

    React components for efficiently rendering large lists and tabular data

    Project mention: Scroll to element in list | reddit.com/r/reactjs | 2021-05-20

    Just wondering if using the following might help https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md

  • GitHub repo NativeBase

    Essential cross-platform UI components for React Native

    Project mention: React Native Vs. Flutter: The Key Differences Every Mobile App Developer Should Know In 2021 [Guide For Beginners] | dev.to | 2021-06-16

    1.React Native Gesture Handler 2.React Native Material UI 3.Native Base; (Cross-platform UI components for React Native) 4.React-Native-UI-Kitten 5.Axious; (HTTP client for the browser and Node.js) 6.React Native Maps

  • GitHub repo react-table

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

    Project mention: Created a stock research tool with React and Capacitor | reddit.com/r/reactjs | 2021-06-15

    Victory for the charts and React Table for the tables.

  • GitHub repo react-dates

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

    Project mention: Things to Consider When Choosing a Component Library | dev.to | 2020-10-11

    This was the case for Airbnb with the popular react-dates project. They tried out solutions and had to change so much code that, at some point, they decided to build their own. The answer to the question of whether to create a component library is, as always, that it depends.

  • GitHub repo evergreen

    🌲 Evergreen React UI Framework by Segment

    Project mention: React Libraries 2021: 15 Best Picks | dev.to | 2021-06-12

    15. Evergreen UI

  • GitHub repo react-window

    React components for efficiently rendering large lists and tabular data

    Project mention: Super Simple List Virtualization in React with IntersectionObserver | dev.to | 2021-05-11

    Also, a new IntersectionObserver is created for every element that you wrap in . This does result in some extra performance overhead - especially if there are hundreds or thousands of items. I can scroll through hundreds or thousands of items on my mid-tier smartphone without noticing any degradation, so this hasn't bothered me so far. However if you really need the absolute best performance of any solution, you might be better off using react-window and spending some extra time to get it working with your setup.

  • GitHub repo marko

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

    Project mention: Next.js 11 | news.ycombinator.com | 2021-06-15
  • GitHub repo react-color

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

  • GitHub repo downshift 🏎

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

    Project mention: Beginner's Thread / Easy Questions (April 2021) | reddit.com/r/reactjs | 2021-04-02

    Downshift looks better IMO, with hooks with less "fake" hierarchy.. https://github.com/downshift-js/downshift

  • GitHub repo react-slick

    React carousel component

    Project mention: carousel | reddit.com/r/react | 2021-04-22

    Try the react-slick package

  • 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: 15+ Fantastic React UI Libraries to Consider for your Project | dev.to | 2021-06-14
  • GitHub repo victory

    A collection of composable React components for building interactive data visualizations

    Project mention: Created a stock research tool with React and Capacitor | reddit.com/r/reactjs | 2021-06-15

    Victory for the charts and React Table for the tables.

  • GitHub repo react-dropzone

    Simple HTML5 drag-drop zone with React.js.

    Project mention: How do I connect my React project to a backend? | reddit.com/r/reactjs | 2021-06-19

    Read their Github examples: https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept

  • GitHub repo react-text-mask

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

  • GitHub repo react-markdown

    Markdown component for React

    Project mention: test post | reddit.com/r/tutobase | 2021-06-06

    For GFM, you can also use a plugin: remark-gfm. It adds support for GitHub-specific extensions to the language: tables, strikethrough, tasklists, and literal URLs.

  • GitHub repo react-native-calendars

    React Native Calendar Components 🗓️ 📆

    Project mention: Need help with Calendar | reddit.com/r/reactnative | 2021-05-18

    Link of repo: https://github.com/wix/react-native-calendars#agenda

  • 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: How can I get yarn to ignore certain files/directories from my BitBucket repos when installing? | reddit.com/r/learnjavascript | 2021-06-16

    It's a case of I have an app in the repo for viewing/testing purposes that I do not want to be installed when I install the repo in my node_modules i.e. installing needless files/directories. For example, react-modal does not install everything from it's github repo as only the dist directory is required for using it.

  • GitHub repo react-map-gl

    React friendly API wrapper around MapboxGL JS

    Project mention: Tutorial: How to create a global vaccinations dashboard using React, Mapbox, and Bootstrap | dev.to | 2021-05-14

    React-map-gl docs

  • GitHub repo react-datepicker

    A simple and reusable datepicker component for React

    Project mention: 15+ Fantastic React UI Libraries to Consider for your Project | dev.to | 2021-06-14
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-06-19.

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,338
2 react-beautiful-dnd 24,039
3 sortablejs 22,667
4 react-virtualized 21,917
5 NativeBase 15,205
6 react-table 14,422
7 react-dates 11,487
8 evergreen 10,833
9 react-window 10,679
10 marko 10,390
11 react-color 9,796
12 downshift 🏎 9,650
13 react-slick 9,609
14 react-sortable-hoc 9,413
15 victory 8,926
16 react-dropzone 8,237
17 react-text-mask 8,027
18 react-markdown 7,218
19 react-native-calendars 6,814
20 react-draggable 6,786
21 react-modal 6,353
22 react-map-gl 5,982
23 react-datepicker 5,789