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.
-
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.
-
-
-
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
-
-
-
-
-
-
-
-
-
-
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
We are continuing to add new project templates for various types of projects, and we've recently created one for the infamous combination of React with Vite tooling.
Source: qcatch on Feb 22, 2024 https://github.com/storybookjs/storybook/discussions/25470
the technical decision how Svelte should treat self-closing html elements was hindered by Prettier:
Project mention: Integrate Copilot feature into your React applications using CopilotKit | dev.to | 2024-05-03Shadcn UI
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
gradio is a package developed to ease the development of app interfaces in python and other languages (GitHub)
Portainer
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/
Project mention: Release Radar · April 2024 Edition: Major updates from the open source community | dev.to | 2024-05-03Imagine designers and coders working seamlessly together. That's what Penpot aims to do. It's a tool where designers can create stunning designs, interactive prototypes, and design systems at scale. Developers then have ready-to-use code, which makes their workflows faster and more efficient. Penpot's latest version receives a new grid CSS layout, new UI, new components system, and more components. Oh and there's now light AND dark mode 🎉.
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.
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.
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).
UI related posts
-
Mastering Component Styling: Elevate Your CSS with Layering and Dynamic Class Management, No ng:deep needed!
-
Composable architecture example: Go headless (best practices)
-
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!
-
A note from our sponsor - SurveyJS
surveyjs.io | 3 May 2024
Index
What are some of the best open-source UI projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | React | 222,111 |
| 2 | storybook | 82,881 |
| 3 | Svelte | 76,553 |
| 4 | shadcn/ui | 57,417 |
| 5 | imgui | 55,870 |
| 6 | Semantic UI | 51,000 |
| 7 | awesome-android-ui | 49,161 |
| 8 | vuetify | 39,052 |
| 9 | gradio | 28,987 |
| 10 | Portainer | 28,938 |
| 11 | sortablejs | 28,760 |
| 12 | penpot | 27,389 |
| 13 | Charts | 27,324 |
| 14 | Editor.js | 26,833 |
| 15 | Lottie | 25,156 |
| 16 | react-native-elements | 24,583 |
| 17 | docz | 23,502 |
| 18 | recharts | 22,680 |
| 19 | SweetAlert | 22,357 |
| 20 | Hero | 21,826 |
| 21 | @blueprintjs/core | 20,415 |
| 22 | SnapKit | 19,792 |
| 23 | ant-design-vue | 19,624 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com