UI Components

Open-source projects categorized as UI Components

Top 23 UI Component Open-Source Projects

  • storybook

    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 [0]. 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:

    1) Messy Javascript API resulting in inexpressive storybook files, particularly for big frameworks like Angular and big components.

    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:

    1) Extremely expressive Javascript API. Think Jest.

    2) Go CLI (allowing direct interface with ESBuild, etc.).

    3) ESBuild-centric (rather than webpack, or worse, addons [1]).

    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?

    Thanks HN!

    [0] https://storybook.js.org/

    [1] https://storybook.js.org/addons/storybook-addon-turbo-build

  • Semantic UI

    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.

  • Zigi

    Workflow assistant built for devs & their teams. Automate the mundane part of your day, with live actionable messages for your GitHub & Jira tasks.

  • vuetify

    🐉 Material Component Framework for Vue

    Project 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

  • Swiper

    Most modern mobile touch slider with hardware accelerated transitions

    Project 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.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Project 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.

  • react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    Project 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.

  • sortablejs

    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/

  • InfluxDB

    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.

  • slate

    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

  • react-select

    The Select Component for React.js

    Project 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-virtualized

    React components for efficiently rendering large lists and tabular data

    Project 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

  • react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: React Native Top UI Components Libraries | dev.to | 2022-07-28

    Github Documentation Stars ⭐ +22.6k

  • react-table

    🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

    Project mention: Sometimes things only work in strict mode | reddit.com/r/reactjs | 2022-11-18
  • NativeBase

    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 !

  • react-dnd

    Drag and Drop for React

    Project 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.

  • tiptap

    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.

  • mantine

    React components library with native dark theme support

    Project 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.

  • daisyui

    ⭐️ ⭐️ ⭐️ ⭐️ ⭐️  The most popular, free and open-source Tailwind CSS component library

    Project 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-window

    React components for efficiently rendering large lists and tabular data

    Project 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.

  • react-content-loader

    ⚪ 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/

  • lexical

    Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

    Project mention: Combining the Command Pattern with State Pattern in JavaScript | dev.to | 2022-11-24

    One example that immediately pops up in my mind is the lexical package by Facebook here. Lexical is an "extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance".

  • TinyMCE

    The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

    Project mention: free-for.dev | dev.to | 2022-11-08

    TinyMCE - rich text editing API. Core features free for unlimited usage.

  • react-dates

    An easily internationalizable, mobile-friendly datepicker library for the web

    Project 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.

  • marko

    A declarative, HTML-based language that makes building web apps fun

    Project 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.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

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). The latest post mention was on 2022-11-24.

UI Components related posts

Index

What are some of the best open-source UI Component projects? This list will help you:

Project Stars
1 storybook 75,213
2 Semantic UI 50,253
3 vuetify 35,879
4 Swiper 33,272
5 chakra-ui 29,853
6 react-beautiful-dnd 28,628
7 sortablejs 25,965
8 slate 25,911
9 react-select 25,441
10 react-virtualized 24,401
11 react-native-elements 23,036
12 react-table 19,922
13 NativeBase 18,641
14 react-dnd 18,497
15 tiptap 17,080
16 mantine 15,838
17 daisyui 15,580
18 react-window 13,346
19 react-content-loader 12,608
20 lexical 12,323
21 TinyMCE 12,194
22 react-dates 12,015
23 marko 11,916
Truly a developer’s best friend
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 🚀.
scoutapm.com