Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀. Learn more →
Top 23 JavaScript UI Component Projects
-
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
Project mention: Top 9 Best UI Component Libraries/Frameworks in 2022 for Frontend Developers🔥 | dev.to | 2022-09-18Semantic UI is a free, open source library that helps you build UIs with confidence. It provides over 3000+ Theming Variables and 50 + UI components and each one of them has been carefully designed to look beautiful and work intuitively. It is designed to be an intuitive, accessible, and flexible starting point for your project. It's packed with features that you can use right out of the box, and it's very easily customizable. To date, it has been downloaded over 6 million times and it has around 50,000 GitHub stars.
-
Project mention: Dumb question? How do you install libraries and frameworks manually? | reddit.com/r/learnprogramming | 2022-11-21
I would like to install Swiper framework for example into a project and play around with it. But I do not want to use NPM or any package manager. I downloaded the assets manually, but I do not know how to add this to my project since the tar archive file I downloaded contains lots of stylesheets, scripts and what appears to be lots of useless files. The website does not show what files to embed into my HTML file. I assume you need to embed one CSS stylesheet and one JS script.
-
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.
-
React react-beautiful-dnd from Atlassian is amazing as well, and it's much more high level than dnd.
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Project mention: Can anyone share an example of drag and drop content | reddit.com/r/reactjs | 2022-11-18Check out https://sortablejs.github.io/Sortable/
-
Project mention: Thoughts on this Timeline design I've been working on? | reddit.com/r/web_design | 2022-11-06
Here’s a react library https://github.com/bvaughn/react-virtualized
-
On the UI it is faster because of the great react-window library - it doesn't render the whole files in the folder at once, only the part you actually see on the screen. That makes scrolling through large directory efficient really fast.
-
Project mention: 25 React component libraries you just might need for your next project! | dev.to | 2022-05-31
react-dates An easily internationalizable, mobile-friendly datepicker library for the web.
-
Zigi
Delete the most useless function ever: context switching.. Zigi monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack! Plus it reduces cycle time by up to 75%.
-
Nevertheless, the future of JS frameworks is exciting. As we’ve seen from the data, Astro is doing some things right alongside Qwik. However, more noteworthy frameworks such as Marko and Solid are also paving the path forward with some similar traits and better performance benchmarks. We’ve come back full circle in web development - from PHP/Rails to SPAs and now back to SSR. Maybe we just need to break the cycle.
-
Project mention: What are your favourite React Native UI frameworks / Libraries? | reddit.com/r/reactnative | 2022-11-04
Is there anything out there that is the React Native equivalent of something like Evergreen, Chakra or Radix?
-
Project mention: 25 React component libraries you just might need for your next project! | dev.to | 2022-05-31
react-color 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.
-
-
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Project mention: I am creating a form builder using React DnD but having some issues. | reddit.com/r/reactjs | 2022-07-21I suggest using this library for DnD.
-
Project mention: [AskJS] Plotting in js: I don't want to get my hands dirty with d3 - what is the next best alternative | reddit.com/r/javascript | 2022-09-10
I've enjoyed using Victory - needs React tho: https://formidable.com/open-source/victory/
-
I've been trying to put together a blog for myself and a point comes when one needs to start thinking about strategies to store the blogs somewhere. One common strategy you find in a lot of tutorials is using some third-party library that parses markdown to the desired semantic, for eg. react-markdown . Now, speaking of the goods of such a library, it (hopefully) tackles the security concerns that come with letting external HTML render on a site. This is the security concern that leads to dangerous function names such as dangerouslySetInnerHTML, quoting the react docs , just " to remind yourself that it’s dangerous " . On a serious note, XSS attacks can be a major pain in the posterior. Apart from that, such libraries also eliminate the need to implement your own markdown parser.
-
I use react-dropzone for file uploads. I use a reducer to track the files that get dropped and on drop I simply upload the file blobs straight to firebase storage.
-
-
Project mention: nize.pics – create beautiful images of code and screenshots | reddit.com/r/webdev | 2022-11-12
Thanks! It's built with React (Next.js) and Mantine for the UI components. I'm not sure what you mean with edit systems, but the layers are using react-draggable. The syntax highlighting is powered by shiki and a bunch of exported VS Code themes. The state is handled by zustand, with the undo-redo functionality built on top of it. The code formatting is done with prettier and the image export uses html-to-image.
-
Project mention: Affordable tailwind theme(html template) for e-commerce project | reddit.com/r/tailwindcss | 2022-11-03
https://tailblocks.cc ⭐
-
react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
Project mention: Is there a way to cache a video clip before using it in ReactPlayer? | reddit.com/r/react | 2022-08-03This package https://www.npmjs.com/package/react-player
-
Project mention: What is the best way to implement a modal in React? | reddit.com/r/reactjs | 2022-08-25
Check out react-modal (https://github.com/reactjs/react-modal)
-
I searched for alternative date pickers to use in place of the default HTML one. I found out that there is a React Date Picker component that can be used in place of the field.
-
My project stick with IE, so I using [email protected], I find out the example for doing this codesandbox but it was been limited, by using 5.1 and upper.
-
Scout APM
Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.
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 2022-11-21.
JavaScript UI Components related posts
- How To Make Pagination In React Without Using Npm Package?
- Making appp
- How to Create a Resume Builder App with Xata and Cloudinary Using NextJs
- Dumb question? How do you install libraries and frameworks manually?
- Drag and Drop libraries
- Can anyone share an example of drag and drop content
- What component libraries are available
-
A note from our sponsor - Scout APM
scoutapm.com | 27 Nov 2022
Index
What are some of the best open-source UI Component projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Semantic UI | 50,253 |
| 2 | Swiper | 33,272 |
| 3 | react-beautiful-dnd | 28,628 |
| 4 | sortablejs | 25,965 |
| 5 | react-virtualized | 24,401 |
| 6 | react-window | 13,346 |
| 7 | react-dates | 12,015 |
| 8 | marko | 11,916 |
| 9 | evergreen | 11,900 |
| 10 | react-color | 11,067 |
| 11 | downshift 🏎 | 10,971 |
| 12 | react-slick | 10,703 |
| 13 | react-sortable-hoc | 10,286 |
| 14 | victory | 10,038 |
| 15 | react-markdown | 9,531 |
| 16 | react-dropzone | 9,314 |
| 17 | react-text-mask | 8,169 |
| 18 | react-draggable | 7,995 |
| 19 | tailblocks | 7,593 |
| 20 | react-player | 7,106 |
| 21 | react-modal | 7,080 |
| 22 | react-datepicker | 6,933 |
| 23 | react-pdf | 6,457 |
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com