Top 23 UI Open-Source Projects
-
A single page application (SPA) is a type of web application that doesn’t load entire new pages from the server in an old and traditional way but instead loads data and contents from the server dynamically. SPA loads all necessary HTML, JavaScript, and CSS with a single page load, and the remaining resources are loaded dynamically usually from a backend Web API, and added to the page on different user actions. This technique results in an improved user experience because the user stays on the same page and control is never transferred to another page. Some popular examples of SPAs are Gmail, Facebook, Google Maps, Twitter, Pinterest, etc. There are many front-end frameworks to build SPAs and the most popular ones are React by Facebook and Angular by Google. Angular is the go-to option for developers who want to develop cross-platform, efficient, and sophisticated single-page apps using HTML, CSS, and TypeScript.
-
storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Project mention: Lessons Learned from Building a React Component Library with TypeScript | dev.to | 2021-10-19Finally, while Storybook has been invaluable for us and I recommend it strongly, I would be remiss if I didn't mention some gotchas. Storybook uses a lot of the same libraries we all use for theming, Markdown, and other things. When there are library conflicts between your version and theirs, bad things happen. For example, we got hit with the same conflict on Emotion as this issue on GitHub. To its credit, the Storybook team releases frequently. If nothing else, make sure you use identical versions of Storybook and all its addons and that you upgrade as soon as possible when updates are available.
-
Syncfusion
Build stunning web applications quickly using Syncfusion JavaScript UI controls.. The Syncfusion JavaScript suite offers more than 65 cross-platform, responsive, and lightweight JS/HTML5 UI controls for building modern web applications.
-
Svelte's accessibility (often shortened to "a11y") warnings are one of the framework's standout features. Per Rich Harris, Svelte is an "a11y-first framework" that "will let you write non-accessible markup, but it won't respect you for it." Accessibility warnings in the compiler have been a part of the framework since version 1.38, and are highlighted in the first section of the tutorial.
-
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
Semantic is a UI component framework based around useful principles from natural language.
-
There is not enough space for buttons let alone for any fancy desigg elements... I just stink material components everywhere (rounded corners, automated colors, auto-text size, day/night switch), add https://materialdesignicons.com/ and the results looking great. And if not then there is this link in the side menu of this sub: https://github.com/wasabeef/awesome-android-ui
-
Project mention: Eli5 How are video game main menu/settings screen/inventory screens programmed? | reddit.com/r/explainlikeimfive | 2021-10-17
There are many options but I believe the most popular paradigm is to use immediate mode UIs, like Dear ImGui, and hook them into the rendering engine itself (i.e. translating the UI draw calls to DirectX / Vulkan), with custom textures/fonts/etc. to make the UI feel 'native' to the game.
-
Vuetify v2.5.9 is live! It includes fixes for the click-outside directive, multiple fixes for inputs including Autocompletes, Sliders, 2 reverts, and more! Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v2.5.9
-
-
Project mention: My biggest project yet! :) Let me know what you think! | reddit.com/r/swift | 2021-09-22
I used this charts library called Charts 3.0
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
I used a Stimulus controller I named drag_controller.js to take care of the drag and drop using Sortable (install with yarn add sortablejs), but other packages may work just as well. This is imported at the top of the controller.
-
Project mention: 18 amazing 🤩 GitHub repositories that will help you 🪄 make a beautiful project | dev.to | 2021-09-03
Lottie for Web, Android, iOS, React Native, and Windows
-
Project mention: This Free Tool Lets You Create World Class Documentation for React Components | dev.to | 2021-10-11
It’s Docz. Docz is a popular state-of-the-art open-source tool that allows anyone to create clean and highly customizable custom software documentation sites with fairly minimal effort. Think of it as using Canva to create cool posters. It has got 21.7k stars on GitHub which is a huge thing in software development. Here are some of the features and cool things about Docz:
-
Sweet Alert - A beautiful replacement for success messages, error messages or info messages
-
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
-
-
Project mention: [Feature Request] Container Auto Update Option. | reddit.com/r/portainer | 2021-10-11
We're tracking this kind of functionality as a feature request in our Github at https://github.com/portainer/portainer/issues/3434 - if this is something that you'd find valuable head on over and give it a thumbs up.
-
More info
-
Project mention: How can I add constraints to a UI element inside a programmatically created UIView? | reddit.com/r/swift | 2021-06-29
I suggest you check out SnapKit. It is a convenient AutoLayout wrapper. I find it a lot more easier to read compared to the built in constraint builder or the string representation.
-
Project mention: My pain building a WYSIWYG editor with contenteditable | reddit.com/r/webdev | 2021-09-17
https://editorjs.io is easy to use and customizable. Not as big as some of the others but completely free
-
Project mention: How this notification is made when I tap "Add to watchlist"? | reddit.com/r/swift | 2021-02-05
That's not a notification, it's a HUD. The most common library I've seen that implements it is MBProgressHud. It's very well documented, so you should be able to implement it easily.
-
It has over 13k stars on Github and on 39,693 weekly downloads on npm.
-
IQKeyboardManager
Codeless drop-in universal library allows to prevent issues of keyboard sliding up and cover UITextField/UITextView. Neither need to write any code nor any setup required and much more.
Project mention: Keyboard overlaying textfield. How do I fix this? | reddit.com/r/SwiftUI | 2021-10-17try adding https://github.com/hackiftekhar/IQKeyboardManager works really great
-
react-native-vector-icons
Customizable Icons for React Native with support for image source and full styling.
you need install the icon package. https://github.com/oblador/react-native-vector-icons
-
Index
What are some of the best open-source UI projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | React | 176,373 |
| 2 | storybook | 65,266 |
| 3 | Svelte | 51,083 |
| 4 | Semantic UI | 49,630 |
| 5 | awesome-android-ui | 41,461 |
| 6 | imgui | 32,417 |
| 7 | vuetify | 32,330 |
| 8 | Charts | 24,663 |
| 9 | sortablejs | 23,286 |
| 10 | Lottie | 22,053 |
| 11 | docz | 21,816 |
| 12 | SweetAlert | 21,810 |
| 13 | react-native-elements | 21,450 |
| 14 | Hero | 20,395 |
| 15 | Portainer | 19,770 |
| 16 | @blueprintjs/core | 18,231 |
| 17 | SnapKit | 17,918 |
| 18 | Editor.js | 16,563 |
| 19 | MBProgressHUD | 15,925 |
| 20 | ant-design-vue | 15,415 |
| 21 | IQKeyboardManager | 15,326 |
| 22 | react-native-vector-icons | 15,246 |
| 23 | MJRefresh | 13,550 |
Are you hiring? Post a new remote job listing for free.
