JavaScript UI Components

Open-source JavaScript projects categorized as UI Components

Top 23 JavaScript UI Component Projects

  • Semantic UI

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

  • Swiper

    Most modern mobile touch slider with hardware accelerated transitions

    Project mention: Slider with two thumbs | /r/reactjs | 2023-07-07
  • 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!

  • react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    Project mention: Free tools for frontend | dev.to | 2023-10-01

    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-05

    Well, 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

    React components for efficiently rendering large lists and tabular data

    Project mention: 13 Must Know Libraries for a React Developer | dev.to | 2023-08-15

    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.

    Project mention: MDX Editor - a Rich Text Markdown Editor React Component | /r/reactjs | 2023-07-05

    Yes, it uses the Lexical framework internally, so markdown gets converted to an AST, then the AST gets serialized back.

  • react-window

    React components for efficiently rendering large lists and tabular data

    Project mention: Top 7 Libraries for Blazingly Fast ReactJS Applications | dev.to | 2023-08-18

    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.

  • marko

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

    Project mention: The Best UI Libraries for Cross-Platform Apps with Tauri | dev.to | 2023-08-04

    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.

  • evergreen

    🌲 Evergreen React UI Framework by Segment

    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?

  • react-dates

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

  • downshift 🏎

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

    Project mention: Just curious about package trends (downshift) | /r/reactjs | 2023-01-30

    I'm curious why there's been a recent downward trend for the downshift package. Here's the source npm trends

  • react-color

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

    Project mention: Five Time Saving React Packages You MUST Try! | dev.to | 2022-12-19

    Documentation

  • react-slick

    React carousel component

    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

  • react-markdown

    Markdown component for React

    Project mention: Creating Own Chat GPT | dev.to | 2023-09-15

    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✌️

  • victory

    A collection of composable React components for building interactive data visualizations

    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.

  • react-dropzone

    Simple HTML5 drag-drop zone with React.js.

    Project mention: Uploading Images in React | dev.to | 2023-09-30

    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.

  • react-draggable

    React draggable component

    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.

  • tailblocks

    Ready-to-use Tailwind CSS blocks.

    Project mention: Looking for full UI examples/copies for tailwind | /r/tailwindcss | 2023-06-23

    If you want a quick copy paste solution http://tailblocks.cc does a good job.

  • react-text-mask

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

  • 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: react-player and customization | /r/CodingHelp | 2023-06-22

    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.

  • react-datepicker

    A simple and reusable datepicker component for React

    Project mention: Datepicker component | /r/react | 2023-05-11
  • react-modal

    Accessible modal dialog component for React

    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

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