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. 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.
-
-
-
-
-
-
-
-
-
-
-
-
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.
In this post, we get to know more about Preact, one of this year's trending libraries. And we'll compare it to React to see which one suits better for our projects.
[Bug]: Configuration with TailwindCss Next.js using Tailwind with Storybook
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.
Honestly the ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that.
[1] https://ui.shadcn.com/
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/
Project mention: Are there out of the box charts available in UI Kit? | /r/iOSProgramming | 2023-04-30
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
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: recharts VS MUI X - a user suggested alternative | libhunt.com/r/recharts | 2024-01-20
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.
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
- 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 - InfluxDB
www.influxdata.com | 24 Apr 2024
Index
What are some of the best open-source UI projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | React | 221,535 |
| 2 | storybook | 82,727 |
| 3 | Svelte | 76,402 |
| 4 | shadcn/ui | 56,834 |
| 5 | imgui | 55,717 |
| 6 | Semantic UI | 50,990 |
| 7 | awesome-android-ui | 49,085 |
| 8 | vuetify | 39,024 |
| 9 | Portainer | 28,736 |
| 10 | gradio | 28,730 |
| 11 | sortablejs | 28,610 |
| 12 | Charts | 27,305 |
| 13 | penpot | 27,234 |
| 14 | Editor.js | 26,755 |
| 15 | Lottie | 24,976 |
| 16 | react-native-elements | 24,567 |
| 17 | docz | 23,494 |
| 18 | recharts | 22,600 |
| 19 | SweetAlert | 22,357 |
| 20 | Hero | 21,815 |
| 21 | @blueprintjs/core | 20,401 |
| 22 | SnapKit | 19,767 |
| 23 | ant-design-vue | 19,557 |
Sponsored
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.
workos.com