Top 23 JavaScript UI Component Projects
-
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
Semantic is a UI component framework based around useful principles from natural language.
-
SwiperJS
-
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.
-
Project mention: Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS | dev.to | 2021-11-27
React Beautiful Dnd: build by Atlassian for Trello, it's reliable BUT
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Project mention: Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS | dev.to | 2021-11-27I went to look for SortableJS, clicked on the demo, scrolled to the grid example which was doing exactly the simple stuff I was looking for.
-
Since this is apparently a popular question and things have progressed since the original question was asked, while I do encourage you to watch the video linked above, in order to get a grasp of a virtual layout, I also encourage you to use the React Virtualized library if you do not want to re-invent the wheel.
-
Project mention: What table component library you prefer to use with React? | reddit.com/r/reactjs | 2021-11-26
check out react-table it is simple-ish. in a sense that it handles most of the logic, but you have to implement the UI.
-
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)
-
-
One thing to keep in mind is that React Hyper Scroller may not be the best for all use-cases. If it doesn't work for you, there are very cool alternatives like react-window, react-virtualized or react-virtual.
-
Project mention: Where are some places I can find pre-made good looking React components (i.e button) | reddit.com/r/webdev | 2021-10-31
Evergreen
-
Now as some of you know this has been an area of focus for me the last couple years both with Marko and even to some degree with Solid. In fact it's kind of been on everyone's mind:
-
depends on the environment/framework you would use. Eg. I use https://casesandberg.github.io/react-color/ as color selector for react.
-
downshift 🏎
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
The concept is not new, it's been discussed and implemented for a couple of years, I first heard of it when Adam Watham, creator of Tailwind CSS, and its team launched Headless UI libraries like downshift by Kent Dodds also used this pattern, just to mention a couple of cases.
-
React Slick - React carousel component. One of the best sliders out there to showcase anything.
-
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Package link:- https://www.npmjs.com/package/react-sortable-hoc
-
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.
-
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.
-
-
Project mention: How I built my portfolio using NextJS, Typescript, and Chakra UI | dev.to | 2021-10-24
react-markdown: Markdown component for React using remark.
-
Project mention: Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS | dev.to | 2021-11-27
-react-draggable: I must say I didn't see that one, and didn't try.
-
Project mention: How do I selectively install/delete folders/files from my repo when I install it? | reddit.com/r/reactjs | 2021-10-21
-
Tailblocks is a website to grab built-in templates using tailwindcss. You can directly copy those components from the website.
-
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 -
-
Yes. You can style it however you want by providing your own styles instead of importing the ones from the npm package. Just replace these with whatever you styling you want: https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss
JavaScript UI Components related posts
- 5 Modern JS Sliders for 2022
- Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS
- What table component library you prefer to use with React?
- Big list performance with React
- Use react-hot-toast with Promise & Axios
- React Hyper Scroller v3 released!
- Complex table component, reinventing the wheel?
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,687 |
| 2 | Swiper | 29,267 |
| 3 | react-beautiful-dnd | 25,585 |
| 4 | sortablejs | 23,441 |
| 5 | react-virtualized | 22,808 |
| 6 | react-table | 15,560 |
| 7 | react-dates | 11,662 |
| 8 | react-window | 11,607 |
| 9 | evergreen | 11,309 |
| 10 | marko | 10,743 |
| 11 | react-color | 10,227 |
| 12 | downshift 🏎 | 10,140 |
| 13 | react-slick | 10,004 |
| 14 | react-sortable-hoc | 9,699 |
| 15 | victory | 9,201 |
| 16 | react-dropzone | 8,600 |
| 17 | react-text-mask | 8,092 |
| 18 | react-markdown | 7,940 |
| 19 | react-draggable | 7,128 |
| 20 | react-modal | 6,676 |
| 21 | tailblocks | 6,240 |
| 22 | react-map-gl | 6,208 |
| 23 | react-datepicker | 6,168 |
Are you hiring? Post a new remote job listing for free.
