Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀. Learn more →
Top 23 UI Component Open-Source Projects
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.Project mention: Ask HN: Is it time for a new Storybook? | news.ycombinator.com | 2022-11-19
I'm sure many have heard of Storybook . I've used it pretty much since the start from ~2016 (back when Angular was cargo-culting it like mad). I've always had generally negative experiences with it:
2) Slow AF with webpack/terser/etc. And that's ebfore you start bolting on crazy addons like compodoc.
3) Tries to solve so many different problems (just a subjective opinion of mine).
4) Insane levels of "framework magic", particularly when I've used it with Angular, but also in other scenarios too.
So, I wanted to ask HN to gauge the appetite for a similar but not same kind of Storybook:
2) Go CLI (allowing direct interface with ESBuild, etc.).
3) ESBuild-centric (rather than webpack, or worse, addons ).
4) Typescript-centric (rather than seeming like an after-thought).
5) Much less framework magic (think React, Redux, etc. Stick mostly to simple explicit JS behaviors).
6) Probably a lot more that haven't come to mind yet.
Before I go any further with it, it would be amazing to hear what you guys think about all of this. What are your thoughts about Storybook? Too much tech debt for them to modernize? Am I just being silly and picky about Storybook? Am I the crazy one?
Semantic is a UI component framework based around useful principles from natural language.Project mention: Top 9 Best UI Component Libraries/Frameworks in 2022 for Frontend Developers🔥 | dev.to | 2022-09-18
Semantic UI is a free, open source library that helps you build UIs with confidence. It provides over 3000+ Theming Variables and 50 + UI components and each one of them has been carefully designed to look beautiful and work intuitively. It is designed to be an intuitive, accessible, and flexible starting point for your project. It's packed with features that you can use right out of the box, and it's very easily customizable. To date, it has been downloaded over 6 million times and it has around 50,000 GitHub stars.
Workflow assistant built for devs & their teams. Automate the mundane part of your day, with live actionable messages for your GitHub & Jira tasks.
🐉 Material Component Framework for VueProject mention: Github repos to see best practices ? | reddit.com/r/vuejs | 2022-11-24
I would recommend the code of open source vue UI libraries, like Vuetify: https://github.com/vuetifyjs/vuetify
Most modern mobile touch slider with hardware accelerated transitionsProject mention: Dumb question? How do you install libraries and frameworks manually? | reddit.com/r/learnprogramming | 2022-11-21
I would like to install Swiper framework for example into a project and play around with it. But I do not want to use NPM or any package manager. I downloaded the assets manually, but I do not know how to add this to my project since the tar archive file I downloaded contains lots of stylesheets, scripts and what appears to be lots of useless files. The website does not show what files to embed into my HTML file. I assume you need to embed one CSS stylesheet and one JS script.
⚡️ Simple, Modular & Accessible UI Components for your React ApplicationsProject mention: MongoDB 2022 Hackathon submission - Introducing Indian dishes catalog | dev.to | 2022-11-23
Then I deployed the API on render as a web service to consume the API on the front-end of the project built with ReactJs and Chakra UI.
Beautiful and accessible drag and drop for lists with ReactProject mention: Drag and Drop libraries | reddit.com/r/node | 2022-11-21
React react-beautiful-dnd from Atlassian is amazing as well, and it's much more high level than dnd.
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.Project mention: Can anyone share an example of drag and drop content | reddit.com/r/reactjs | 2022-11-18
Check out https://sortablejs.github.io/Sortable/
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.
A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)Project mention: Slate | Editor in 10min with Next.js and TS ✍️ | dev.to | 2022-10-17
Link to Repo
The Select Component for React.jsProject mention: Handling Types In 3rd Party Packages in React/Node | reddit.com/r/typescript | 2022-10-08
It shows that react-google-places-autocomplete is using the previous version of react-select. Let's check that previous version. Aha! The previous version is not written in TypeScript, and does not have TS types. Let's check the documentation also (always check the documentation!), and they explain how the current version was rewritten in TypeScript.
React components for efficiently rendering large lists and tabular dataProject mention: Thoughts on this Timeline design I've been working on? | reddit.com/r/web_design | 2022-11-06
Here’s a react library https://github.com/bvaughn/react-virtualized
Cross-Platform React Native UI ToolkitProject mention: React Native Top UI Components Libraries | dev.to | 2022-07-28
Github Documentation Stars ⭐ +22.6k
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-TableProject mention: Sometimes things only work in strict mode | reddit.com/r/reactjs | 2022-11-18
Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.Project mention: Any good UI libraries? | reddit.com/r/reactnative | 2022-11-21
There are lots of them but i would prefer - https://nativebase.io/ Its popular and has wide range of support too !
Drag and Drop for ReactProject mention: How to Implement Drag and Drop in React | dev.to | 2022-10-05
react-dnd: This is very popular, but it’s a bit complex to use.
The headless editor framework for web artisans.Project mention: Making appp | reddit.com/r/golang | 2022-11-24
You could use tiptap (tiptap.dev) and then extend it.
React components library with native dark theme supportProject mention: Is there a dedicated ui library dedicated for server component? | reddit.com/r/nextjs | 2022-11-23
I tried Nextjs 13 today, with the new app directory that uses server component by default. I tried using mantine.dev in this project (which uses emotion/core). This will throw an error of ou're importing a component that needs flushSync. It only works in a Client Component. I wonder if the problem lies with emotion/core's SSR strategy or if it's just we should use only style libraries like tailwind for server components.
⭐️ ⭐️ ⭐️ ⭐️ ⭐️ The most popular, free and open-source Tailwind CSS component libraryProject mention: Why Tailwindcss over styled-components? | reddit.com/r/reactjs | 2022-11-23
I find the combination of tailwind and a tailwind based components(like DaisyUI)a perfect combination for having components without losing flexibility.
React components for efficiently rendering large lists and tabular dataProject mention: I've built a self-hosted file storage | reddit.com/r/selfhosted | 2022-11-09
On the UI it is faster because of the great react-window library - it doesn't render the whole files in the folder at once, only the part you actually see on the screen. That makes scrolling through large directory efficient really fast.
⚪ SVG-Powered component to easily create skeleton loadings.Project mention: Just launched my first app - ShopCats (shopcats.app). Getting react-navigation right was a very interesting challenge, details below. | reddit.com/r/reactnative | 2022-07-05
What's great about is that you can design your loading screens on their site: https://skeletonreact.com/
TinyMCE - rich text editing API. Core features free for unlimited usage.
An easily internationalizable, mobile-friendly datepicker library for the webProject mention: 25 React component libraries you just might need for your next project! | dev.to | 2022-05-31
react-dates An easily internationalizable, mobile-friendly datepicker library for the web.
A declarative, HTML-based language that makes building web apps funProject mention: Movies app in 7 frameworks - which is fastest and why? | dev.to | 2022-11-21
Nevertheless, the future of JS frameworks is exciting. As we’ve seen from the data, Astro is doing some things right alongside Qwik. However, more noteworthy frameworks such as Marko and Solid are also paving the path forward with some similar traits and better performance benchmarks. We’ve come back full circle in web development - from PHP/Rails to SPAs and now back to SSR. Maybe we just need to break the cycle.
UI Components related posts
Estuary-Redux: A revived, modern looking version of the Estuary design framework (WIP)
1 project | reddit.com/r/css | 26 Nov 2022
Estuary-Redux: A revived, modern looking version of the Estuary design framework (WIP!)
1 project | reddit.com/r/webdev | 26 Nov 2022
How To Make Pagination In React Without Using Npm Package?
1 project | dev.to | 24 Nov 2022
2 projects | reddit.com/r/golang | 24 Nov 2022
Is there a dedicated ui library dedicated for server component?
3 projects | reddit.com/r/nextjs | 23 Nov 2022
I wish Rails was better
2 projects | reddit.com/r/rails | 23 Nov 2022
How to Create a Resume Builder App with Xata and Cloudinary Using NextJs
7 projects | dev.to | 23 Nov 2022
A note from our sponsor - Scout APM
scoutapm.com | 26 Nov 2022
What are some of the best open-source UI Component projects? This list will help you: