The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more! Learn more →
Top 23 JavaScript UI Component Projects
-
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
-
-
Appwrite
Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!
-
Drag-and-drop library for React with beautiful animations. Website - GitHub
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Project mention: Show HN: An open source visual editor for React | news.ycombinator.com | 2023-09-05Well, there are obvious leading contenders like `https://sortablejs.github.io/Sortable/` and, within the `vue` space, `https://sortablejs.github.io/vue.draggable.next/`. Most of the stuff I looked at was unmaintained (lots not updated for vue3).
I really disliked the vuedraggable was handling nesting, and it's just a wrapper around a sortable. At the end of the day, my problem was simple enough that I didn't want a 500kb dependency. If you're wanting to do something like the OP but with nesting, I'd definitely start by looking at Sortable, though (maybe wrapping it the way you want).
-
React Virtualized is a React library that helps you work with large lists and tabular data efficiently in React. It has more than 25K stars on GitHub and more than 2.5 million weekly downloads on NPM as of August 2023.
-
lexical
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
Yes, it uses the Lexical framework internally, so markdown gets converted to an AST, then the AST gets serialized back.
-
React Window is used to render long lists. Imagine you have a list of 1,000 items. Only ten are visible simultaneously, but your code tries to render all 1,000 items simultaneously.
-
Revelo Payroll
Free Global Payroll designed for tech teams. Building a great tech team takes more than a paycheck. Zero payroll costs, get AI-driven insights to retain best talent, and delight them with amazing local benefits. 100% free and compliant.
-
SolidJS and Tauri form another potent combination for creating performant, lightweight, and secure experiences. SolidJS is a reactive UI library that is similar to Svelte in the way it compiles away reactivity and updates the DOM directly, but it also incorporates a fine-grained reactivity system reminiscent of libraries like Marko, Knockout, and MobX.
-
Project mention: What are your favourite React Native UI frameworks / Libraries? | /r/reactnative | 2022-11-04
Is there anything out there that is the React Native equivalent of something like Evergreen, Chakra or Radix?
-
-
downshift 🏎
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
I'm curious why there's been a recent downward trend for the downshift package. Here's the source npm trends
-
Documentation
-
Project mention: React Carousel that allows for variable height and vertically scrollable content | /r/react | 2023-04-02
1 - React Alice Carousel : https://github.com/maxmarinich/react-alice-carousel 2 - React Slick : https://react-slick.neostack.com/ 3 - React Responsive Carousel : https://www.npmjs.com/package/react-responsive-carousel
-
The OpenAI API returns responses in Markdown format. To display responses from the chat, which contain formatting, I used the ReactMarkdown component. For code inserts, I used React Syntax Highlighter.
-
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
-
Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31
Victory is a set of modular charting components for React and React Native. Victory makes it easy to get started without sacrificing flexibility. Create one of a kind data visualizations with fully customizable styles and behaviors. Victory uses the same API for web and React Native applications for easy cross-platform charting.
-
In addition to being able to access the file browser to select an image to upload, I also wanted to be able to drag'n'drop that image as well. While researching a few options, I came across react-dropzone, a "Simple React hook to create a HTML5-compliant drag'n'drop zone for files." Installation was easy, and the docs were well-written with many examples of different applications.
-
Project mention: nize.pics – create beautiful images of code and screenshots | /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.
-
If you want a quick copy paste solution http://tailblocks.cc does a good job.
-
-
react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
I realized that react-player which is essential a video can play these types and play them well. The biggest issue I'm running into now is that I can't get any sort of customization done to this player and the default styling is kind of ugly. Does anyone have any experience in customizing this player? I've checked the node modules or anything for some css but I couldn't come across anything.
-
-
Project mention: Top React UI Libraries for Simplifying Frontend Development and How to Implement Them | dev.to | 2023-03-19
For styling and additional configuration, refer to full documentation here: React Modal Documentation.
-
Onboard AI
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
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 2023-10-01.
JavaScript UI Components related posts
- Free tools for frontend
- Uploading Images in React
- React Js Developers ⭐ Create a Email Editor with React-Quill
- Creating Own Chat GPT
- Crafting a Dynamic Blog with Next.js 13 App Directory
- I am looking for a double thumb slider ( input range ).
- Using two component libraries in one project one for mobile and the other for Desktop
-
A note from our sponsor - Appwrite
appwrite.io | 2 Oct 2023
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,773 |
| 2 | Swiper | 36,714 |
| 3 | react-beautiful-dnd | 30,967 |
| 4 | sortablejs | 27,480 |
| 5 | react-virtualized | 25,356 |
| 6 | lexical | 15,591 |
| 7 | react-window | 14,609 |
| 8 | marko | 12,811 |
| 9 | evergreen | 12,228 |
| 10 | react-dates | 12,158 |
| 11 | downshift 🏎 | 11,609 |
| 12 | react-color | 11,578 |
| 13 | react-slick | 11,244 |
| 14 | react-markdown | 11,195 |
| 15 | react-sortable-hoc | 10,547 |
| 16 | victory | 10,518 |
| 17 | react-dropzone | 9,913 |
| 18 | react-draggable | 8,476 |
| 19 | tailblocks | 8,266 |
| 20 | react-text-mask | 8,236 |
| 21 | react-player | 8,192 |
| 22 | react-datepicker | 7,527 |
| 23 | react-modal | 7,269 |
Collect and Analyze Billions of Data Points in Real Time
Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
www.influxdata.com