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.

    Project mention: Top 9 Best UI Component Libraries/Frameworks in 2022 for Frontend Developers🔥 | dev.to | 2022-09-18

    Semantic 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.

  • Swiper

    Most modern mobile touch slider with hardware accelerated transitions

    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-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    Project mention: Drag and Drop libraries | reddit.com/r/node | 2022-11-21

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

    Check out https://sortablejs.github.io/Sortable/

  • react-virtualized

    React components for efficiently rendering large lists and tabular data

    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

  • react-window

    React components for efficiently rendering large lists and tabular data

    Project mention: I've built a self-hosted file storage | reddit.com/r/selfhosted | 2022-11-09

    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.

  • react-dates

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

    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%.

  • marko

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

    Project mention: Movies app in 7 frameworks - which is fastest and why? | dev.to | 2022-11-21

    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.

  • evergreen

    🌲 Evergreen React UI Framework by Segment

    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?

  • react-color

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

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

    React carousel component

    Project mention: Best Carlousel library for React? | reddit.com/r/reactjs | 2022-10-22
  • 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-21

    I suggest using this library for DnD.

  • victory

    A collection of composable React components for building interactive data visualizations

    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/

  • react-markdown

    Markdown component for React

    Project mention: Storing & Rendering Blogs: no markdown-parser | dev.to | 2022-11-05

    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.

  • react-dropzone

    Simple HTML5 drag-drop zone with React.js.

    Project mention: Any good library to handle file uploads??? | reddit.com/r/reactjs | 2022-10-06

    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.

  • react-text-mask

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

  • react-draggable

    React draggable component

    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.

  • tailblocks

    Ready-to-use Tailwind CSS blocks.

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

    This package https://www.npmjs.com/package/react-player

  • react-modal

    Accessible modal dialog component for React

    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)

  • react-datepicker

    A simple and reusable datepicker component for React

    Project mention: Hacktoberfest Week 2: First Bug Fix | dev.to | 2022-10-15

    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.

  • react-pdf

    Display PDFs in your React app as easily as if they were images. (by wojtekmaj)

    Project mention: Is possible react-pdf get pagination in 4.x? | dev.to | 2022-10-25

    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

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