With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js. Learn more →
Top 23 UI Open-Source Projects
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
-
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
You can use any frontend framework you want — react-based tooling, however, has a natural advantage as it models everything as a function of state, which can map 1:1 with the concept in Burr. In the demo app we use react, react-query, and tailwind, but we’ll be skipping over this largely (it is not central to the purpose of the post).
Source: qcatch on Feb 22, 2024 https://github.com/storybookjs/storybook/discussions/25470
React has introduced measures like batching state updates, background concurrent rendering and memoization to tackle this. My opinion is that the best way to solve the problem is by improving their reactivity model. The app needs to be able to track the code that should be re-run on updating a given state variable and specifically update the UI corresponding to this update. Tools like solid.js and svelte work in this manner. It also eliminates the need for a virtual DOM and diffing.
Project mention: System & Database Design (Day 1) - Creating a SaaS Startup in 30 Days | dev.to | 2024-04-26Shadcn/ui: I've never tried it before but have always wanted to switch from MaterialUI
include(cmake/CPM.cmake) function(raylib_imgui_setup_dependencies) message(STATUS "Include Dear ImGui") FetchContent_Declare( ImGui GIT_REPOSITORY https://github.com/ocornut/imgui GIT_TAG 277ae93c41314ba5f4c7444f37c4319cdf07e8cf) # v1.90.4 FetchContent_MakeAvailable(ImGui) FetchContent_GetProperties(ImGui SOURCE_DIR IMGUI_DIR) add_library( imgui STATIC ${imgui_SOURCE_DIR}/imgui.cpp ${imgui_SOURCE_DIR}/imgui_draw.cpp ${imgui_SOURCE_DIR}/imgui_widgets.cpp ${imgui_SOURCE_DIR}/imgui_tables.cpp) target_include_directories(imgui INTERFACE ${imgui_SOURCE_DIR}) include(cmake/CPM.cmake) message(STATUS "Include dbg-macro") cpmaddpackage( "gh:sharkdp/dbg-macro#fb9976f410f8b29105818b20278cd0be0e853fe8" )# v0.5.1 message(STATUS "Include fmtlib") cpmaddpackage("gh:fmtlib/fmt#e69e5f977d458f2650bb346dadf2ad30c5320281" )# 10.x message(STATUS "Include raylib") cpmaddpackage("gh:raysan5/raylib#ae50bfa2cc569c0f8d5bc4315d39db64005b1b0" )# v5.0 message(STATUS "Include spdlog") cpmaddpackage("gh:gabime/spdlog#7c02e204c92545f869e2f04edaab1f19fe8b19fd" )# v1.13.0 message(STATUS "Include rlImGui") FetchContent_Declare( rlImGui GIT_REPOSITORY https://github.com/raylib-extras/rlImGui GIT_TAG d765c1ef3d37cf939f88aaa272a59a2713d654c9) FetchContent_MakeAvailable(rlImGui) FetchContent_GetProperties(rlImGui SOURCE_DIR RLIMGUI_DIR) add_library(rlimgui STATIC ${rlimgui_SOURCE_DIR}/rlImgui.cpp) target_link_libraries(rlimgui PRIVATE imgui raylib) target_include_directories(rlimgui INTERFACE ${rlimgui_SOURCE_DIR}) endfunction()
1. The author links to this file as an example: https://github.com/Semantic-Org/Semantic-UI/blob/49b9cbf47c1... . How would you structure it better than it currently is without using sections?
2. So you have a class that has a bunch of getters and setters. Let's just assume that "generate them automatically" is not an option. You want to make it really easy to see the part of the class which is getters, and the part of the class which is setters, and then skim past that. How do you do it?
3. So you have a file that defines 3 data structures. Each data structure has a definition, a bunch of functions for parsing it, and a bunch of functions for serializing it. The author suggests that you split the file into 3 sections for the types, with subsections each for the definition, parsing, and serializing. How would you do it? Let's say the language is Rust or Typescript.
👉 https://vuetifyjs.com
Portainer
Project mention: Show HN: Dropbase – Build internal web apps with just Python | news.ycombinator.com | 2023-12-05There's also that library all the AI models started using that gives you a public URL to share. After researching it: https://www.gradio.app/ is the link.
It's used specifically for making simple UIs for machine learning apps. But I guess technically you could use it for anything.
Project mention: A feature-rich front-end drag-and-drop component library | news.ycombinator.com | 2024-04-24We've been using SortableJS for years for similar functionality.
https://sortablejs.github.io/Sortable/
Really neat. I was mainly curious to know when they are planning to release the self hosted docker versions of Penpot 2.0. Looks like its coming in the next couple days hopefully [1].
[1]: https://github.com/penpot/penpot/issues/4380
Project mention: Are there out of the box charts available in UI Kit? | /r/iOSProgramming | 2023-04-30
I am supporting a project where lawyers, advisors can publish articles or news, to get more attention and clients. Initially it was made through TinyMCE, but they wanted not just HTML, but also a way of showing many pictures with interactions. I was seeking UI editor like Medium, and I guess best what I found was EditorJS and during checking its Awesome List there were several carousel plugins and I stopped on this.
Project mention: Lottie from Airbnb – iOS library to render After Effects vector animations | news.ycombinator.com | 2024-04-20
Once we've set up the storage mechanism, building an email and password sign in flow becomes pretty straight forward. Install react-native-elements to get some nice cross platform button and input fields:
Project mention: Ask HN: What's the best charting library for customer-facing dashboards? | news.ycombinator.com | 2024-04-29Chartjs looks great, but I've never used it so can't recommend personally. I've used https://recharts.org a lot with success.
Project mention: Created this app using Swift and a bit of Objective-C | /r/iOSProgramming | 2023-04-30I started out with the Hero library (https://github.com/HeroTransitions/Hero) but soon replaced it with custom made animation. However, you may want to look into this library as is has a lot of nice transitions ready to use for most cases.
Official Website: https://blueprintjs.com/
Project mention: 10 UI Libraries You Should Explore for Your Next Vue.js Project | dev.to | 2023-10-298. Ant Design Vue Ant Design Vue is the Vue.js implementation of Ant Design, a popular UI library for React. It provides high-quality components and a polished UI experience. Visit the Ant Design Vue website for more details.
UI related posts
- I'm giving up on open source
- Concluding OSD700
- ChatCraft v2.0.0
- Lottie from Airbnb – iOS library to render After Effects vector animations
- ChatCraft week 14: Releasing v2.0!
- Contributing to Open Source Project ChatCraft
- Release v1.9.0 - ChatCraft.org
-
A note from our sponsor - SurveyJS
surveyjs.io | 29 Apr 2024
Index
What are some of the best open-source UI projects? This list will help you:
Project | Stars | |
---|---|---|
1 | React | 221,803 |
2 | storybook | 82,810 |
3 | Svelte | 76,553 |
4 | shadcn/ui | 56,834 |
5 | imgui | 55,717 |
6 | Semantic UI | 50,990 |
7 | awesome-android-ui | 49,161 |
8 | vuetify | 39,052 |
9 | Portainer | 28,852 |
10 | gradio | 28,730 |
11 | sortablejs | 28,684 |
12 | penpot | 27,389 |
13 | Charts | 27,314 |
14 | Editor.js | 26,833 |
15 | Lottie | 25,141 |
16 | react-native-elements | 24,583 |
17 | docz | 23,502 |
18 | recharts | 22,680 |
19 | SweetAlert | 22,357 |
20 | Hero | 21,815 |
21 | @blueprintjs/core | 20,409 |
22 | SnapKit | 19,780 |
23 | ant-design-vue | 19,590 |
Sponsored