Top 23 JavaScript UI Component Projects
-
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
-
react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React
Project mention: I'm building a menu bar app to check the things that matter to you | reddit.com/r/SideProject | 2021-02-25Thanks. I'm using this lib https://github.com/atlassian/react-beautiful-dnd.
-
Scout
Get performance insights in less than 4 minutes. 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-select
The Select Component for React.js
-
sortablejs
Create and reorder lists with drag-and-drop. For use with modern browsers and touch devices
-
react-virtualized
React components for efficiently rendering large lists and tabular data
Virtualize components that are not visible (ie do not actually render them unless they are in view). This is generally for large lists. Use this library to help with that - https://github.com/bvaughn/react-virtualized
-
react-native-elements
Cross-Platform React Native UI Toolkit
Project mention: If you've been hesitating to give Reanimated 2 a try for awhile, this is your best shot. I put a lot of effort to make it as concise and simple to start with. I truly hope this will be helpful. Very open to feedback, so really speak your mind! | reddit.com/r/reactnative | 2021-02-25are you looking for libraries like react-native-elements? there's a list of it here.
-
NativeBase
Essential cross-platform UI components for React Native
Nativebase is a nice alternative to use, its a complete kit, have a lot of components and a good documentation. The idea here is "truly native look and feel", you will get a native ui for Android and Ios. We also can have some nice examples of projects and some awesome templates. Check here some screenshots:
-
react-table
⚛️ Hooks for building fast and extendable tables and datagrids for React
-
react-dates
An easily internationalizable, mobile-friendly datepicker library for the web
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.
-
evergreen
🌲 Evergreen React UI Framework by Segment
-
marko
A declarative, HTML-based language that makes building web apps fun
What makes this whole thing possible is browsers will eagerly render even drawing elements that they haven't yet received their closing tags and execute scripts inline as you send them on the page. I will describe how this works in Marko.
-
react-color
:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
-
downshift 🏎
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Project mention: Launch HN: MagicBell (YC W21) – embedded notification system for your product | news.ycombinator.com | 2021-02-05 -
react-slick
React carousel component
Project mention: What's a good image carousel/slider these days? | reddit.com/r/web_design | 2021-01-02I've had good results using slick slider. https://kenwheeler.github.io/slick/ and the react version https://github.com/akiran/react-slick
-
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
-
victory
A collection of composable React components for building interactive data visualizations
Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18Victory
-
react-text-mask
Input mask for React, Angular, Ember, Vue, & plain JavaScript
-
react-dropzone
Simple HTML5 drag-drop zone with React.js.
-
react-markdown
Markdown component for React
Project mention: [React] Libraries to simplify styling/formatting of user "posts" retrieved from the database as a gigantic string of doom and ugliness? | reddit.com/r/learnprogramming | 2021-01-30How about https://github.com/remarkjs/react-markdown?
-
react-draggable
React draggable component
-
react-modal
Accessible modal dialog component for React
I've build an example app with Create React App to illustrate this. The App component includes a modal built with React Modal:
-
react-map-gl
React friendly API wrapper around MapboxGL JS
-
react-autosuggest
WAI-ARIA compliant React autosuggest component
Project mention: Covtact: Secure COVID-19 Contact Diary [DO Hackathon submission] | dev.to | 2021-01-09React Date Picker and React Autosuggest which helped me to build easy to use inputs.💻
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,017 |
2 | react-beautiful-dnd | 22,604 |
3 | react-select | 21,997 |
4 | sortablejs | 21,970 |
5 | react-virtualized | 21,075 |
6 | react-native-elements | 20,140 |
7 | NativeBase | 14,721 |
8 | react-table | 13,603 |
9 | react-dates | 11,275 |
10 | evergreen | 10,514 |
11 | marko | 10,082 |
12 | react-color | 9,433 |
13 | downshift 🏎 | 9,336 |
14 | react-slick | 9,237 |
15 | react-sortable-hoc | 9,124 |
16 | victory | 8,689 |
17 | react-text-mask | 7,940 |
18 | react-dropzone | 7,929 |
19 | react-markdown | 6,560 |
20 | react-draggable | 6,427 |
21 | react-modal | 6,067 |
22 | react-map-gl | 5,805 |
23 | react-autosuggest | 5,552 |