UI Components

Open-source projects categorized as UI Components | Edit details
Language filter: + TypeScript + JavaScript + SCSS

Top 23 UI Component Open-Source Projects

  • GitHub repo storybook

    📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

    Project mention: Anatomy of a high-velocity CI/CD pipeline | dev.to | 2021-12-02

    storybook builds that showcase specific UI elements included within the change

  • GitHub repo Semantic UI

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

    Project mention: 10 UI Library to Make Your React App Development Faster | dev.to | 2021-08-17

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

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

  • GitHub repo vuetify

    🐉 Material Component Framework for Vue

    Project mention: Do you know good opensource Vue3 projects to learn advanced vue concepts ? | reddit.com/r/vuejs | 2021-11-29
  • GitHub repo Swiper

    Most modern mobile touch slider with hardware accelerated transitions

    Project mention: 5 Modern JS Sliders for 2022 | dev.to | 2021-11-27


  • GitHub repo react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    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

  • GitHub repo react-select

    The Select Component for React.js

    Project mention: Ask HN: What are the fundamental diffs between modern web vs. desktop UI models | news.ycombinator.com | 2021-11-23

    @drowe859's answer was excellent.

    The only thing I'd add is that there's _thousands_ of freely available React components, including dozens of implementations of the kinds of widgets you listed (treeviews, specific form input types, etc). Sometimes they're available as a one-off lib [0], a small focused lib with a few specific components [1] [2], or a giant kitchen sink lib with dozens or hundreds of components [3] [4] [5] [6].

    So, those _do_ exist, and in a similar sense to Qt or Gtk.

    [0] https://react-select.com/

    [1] http://jquense.github.io/react-widgets/

    [2] https://react-spectrum.adobe.com/react-spectrum/

    [3] https://mui.com/

    [4] https://react-bootstrap.github.io/

    [5] https://retool.com/blog/react-component-libraries/#blueprint

    [6] https://lmgtfy.app/?q=react+component+libraries

  • GitHub repo 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-27

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

  • Nanos

    Run Linux Software Faster and Safer than Linux with Unikernels.

  • GitHub repo slate

    A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)

    Project mention: What is Slate.js, and will it replace Quill and Draft.js? | dev.to | 2021-11-23

    Slate.js is a highly customizable platform for creating rich-text editors, also known as WYSIWYG editors. It enables you to create powerful, intuitive editors similar to those you’ve probably used in Medium, Dropbox Paper, or Google Docs. These are quickly becoming standard features for many web apps, and tools like Slate make them easier to implement, ensuring your program won’t get bogged down in complexity.

  • GitHub repo react-virtualized

    React components for efficiently rendering large lists and tabular data

    Project mention: Big list performance with React | reddit.com/r/codehunter | 2021-11-26

    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.

  • GitHub repo chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Project mention: How to get better and easier state management with Redux Toolkit | dev.to | 2021-12-01

    In addition to Redux the project is made with Next.js, TypeScript, ChakraUI and Pokemon TCG API.

  • GitHub repo react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: Top 7 React Native UI toolkits and component libraries in 2021 | dev.to | 2021-06-15

    More information available here: https://reactnativeelements.com

  • GitHub repo react-dnd

    Drag and Drop for React

    Project mention: A powerful drag and drop library for Angular | reddit.com/r/Angular2 | 2021-08-15

    Yes, there has many differences. it's based on html5 drag and drop. You can check the examples here, it's difficult to achieve with @angular/cdk. The library is cloned from angular-skyhook which inspired by react-dnd.

  • GitHub repo NativeBase

    Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

    Project mention: What are the downsides to using react native for web? | reddit.com/r/reactnative | 2021-12-01

    Or battle-tested 3rd party components like https://nativebase.io/

  • GitHub repo react-table

    ⚛️ Hooks for building fast and extendable tables and datagrids for React

    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.

  • GitHub repo Bit

    A tool for component-driven application development.

    Project mention: Top 7 React Developer Tools to Use in 2021 (With Bonus!) | dev.to | 2021-11-10

    2. Bit

  • GitHub repo tiptap

    The headless editor framework for web artisans.

    Project mention: Recommend markdown text field component | reddit.com/r/vuejs | 2021-11-14

    You should take a look at TipTap, works great and can be edited to your needs. Link

  • GitHub repo react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

    Project mention: Awesome Things Related To React Hooks 😍 | dev.to | 2021-09-23

    React Content Loader - SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).

  • GitHub repo react-dates

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

    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)

  • GitHub repo react-window

    React components for efficiently rendering large lists and tabular data

    Project mention: React Hyper Scroller v3 released! | dev.to | 2021-11-24

    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.

  • GitHub repo evergreen

    🌲 Evergreen React UI Framework by Segment

    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


  • GitHub repo marko

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

    Project mention: Solidjs – JavaScript UI Library | news.ycombinator.com | 2021-11-29

    When I go to https://markojs.com in Safari (14.1.2), the CPU load on my MacBook Air goes up above 100%. If I use the Brave browser, the CPU load is closer to 25%. Still too much.

  • GitHub repo Primer

    The CSS design system that powers GitHub

    Project mention: 🚀20 Best CSS3 Library For Developers. | dev.to | 2021-07-26

    11. Primer CSS

  • GitHub repo react-color

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

    Project mention: I’m looking for a certain library for colors | reddit.com/r/webdev | 2021-08-18

    depends on the environment/framework you would use. Eg. I use https://casesandberg.github.io/react-color/ as color selector for react.

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 2021-12-02.

UI Components related posts


What are some of the best open-source UI Component projects? This list will help you:

Project Stars
1 storybook 66,825
2 Semantic UI 49,696
3 vuetify 32,930
4 Swiper 29,343
5 react-beautiful-dnd 25,645
6 react-select 23,748
7 sortablejs 23,469
8 slate 22,972
9 react-virtualized 22,845
10 chakra-ui 22,407
11 react-native-elements 21,667
12 react-dnd 16,779
13 NativeBase 16,583
14 react-table 15,606
15 Bit 14,373
16 tiptap 13,437
17 react-content-loader 11,731
18 react-dates 11,671
19 react-window 11,651
20 evergreen 11,309
21 marko 10,774
22 Primer 10,615
23 react-color 10,246
Find remote jobs at our new job board 99remotejobs.com. There are 33 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives