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 TypeScript UI Component 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.
-
slate
A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)
-
-
react-table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
-
-
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.
-
-
NativeBase
Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
-
lexical
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
-
-
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
-
primitives
Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
-
ag-Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
-
react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
-
-
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
-
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
As a development server, we can use an actual development server of our app, like Create React App (that we use for the examples) or Vite, or another tool like React Styleguidist or Storybook, to test isolated components.
👉 https://vuetifyjs.com
Here’s another mentality shift for you. If you were thinking in a providers pattern, you need to snap out of it. You can no longer store your theme in a provider. No more RadixUI or MantineUI for you.
The Editor: The core of our app is the editor. We need an easy to use and robust rich text editor, that supports all of the features we want such as: headings, lists, placeholders, markdown, color, images, bold italic etc… For this we will use @10play/tentap-editor which is a rich text editor for react native based on Tiptap.
react-dnd is quite powerful but a bit complex and requires some getting used to.
Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29Gluestack, like any other customizable UI library, is built to make styling less cumbersome. It comprises a set of themed and unstyled components easily integrated across different platforms and devices. Originally, Gluestack was a part of NativeBase, a component library for both React and React Native. With performance and maintainability in mind, NativeBase was split into two parts, focusing on a universal CSS-in-JS library and an independent set of unstyled components. Gluestack has several advantages, some of which are:
I remember using https://github.com/facebook/lexical for a project a year ago and mostly things worked our of the box.
Any reason to prefer quill?
You can also check NaiveUI https://www.naiveui.com/
TinyMCE provided a bit more information about this change in a GitHub discussion thread here: https://github.com/tinymce/tinymce/discussions/9496
As I posted there, this directly affects my open source project which is heavily tied to TinyMCE so I may end up forking, and reducing down to what my project needs to reduce maintenance scope & burden.
TinyMCE have been jumping around with their licensing. They were under LGPL, with some (what I believe were) misleading guidance into meeting the LGPL (they specified rules about keeping specific branding elements). They then jumped to MIT, and since moved some of the open plugins to their commercial offering. Now they're making this change.
Project mention: Radix Primitives: an open-source UI component library | news.ycombinator.com | 2024-03-20
React Toastify
Project mention: How To Enhance AG Grid with Avatars: Building a Collaborative Grid with React and Ably | dev.to | 2024-01-26In this post I’ll show you how, using the AG Grid component and Ably Spaces, you can create a React application that allows users to see not only who else is currently viewing the grid, but using a Flowbite Avatar Stack component, what row each user currently has selected.
Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31Victory is a set of modular charting components for React and React Native. Victory makes it easy to get started without sacrificing flexibility. Create one of a kind data visualizations with fully customizable styles and behaviors. Victory uses the same API for web and React Native applications for easy cross-platform charting.
Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:
React-hot-toast manages its state outside of react you can have a look for yourself: https://github.com/timolins/react-hot-toast/blob/main/src/core/store.ts it just listens to changes that occur to their own managed store :) - pretty much how all "global state libraries" work
Ant Design: A solid option that is been used by a lot of heavy hitters, such as Tencent, Baidu, AliBaba, and more. Supports all modern browsers, SSR, esm, and even Electron. Has also community implementations for Angular, Vue, and more. Does use CSS-in-JS, so expect runtime overhead as well as AntD ways of doing things.
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).
TypeScript UI Components related posts
-
9 React Calendar Components for Your Next App
-
Collab Chronicles: Exploring the Collaborative Experience
-
How to optimise React Apps?
-
Astro.js as an alternative to Next.js: pushing the limits
-
Aplicando paginação em um componente Select
-
How I Built an Open-Source Admin Dashboard Template with Mantine and Next.js
-
Exploring the Best UI Component Libraries for React Native apps
-
A note from our sponsor - SurveyJS
surveyjs.io | 8 May 2024
Index
What are some of the best open-source UI Component projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | storybook | 82,881 |
| 2 | vuetify | 39,063 |
| 3 | slate | 29,033 |
| 4 | react-select | 27,264 |
| 5 | mantine | 24,574 |
| 6 | react-table | 24,150 |
| 7 | tiptap | 23,923 |
| 8 | react-dnd | 20,519 |
| 9 | NativeBase | 20,021 |
| 10 | lexical | 17,375 |
| 11 | naive-ui | 15,225 |
| 12 | TinyMCE | 14,383 |
| 13 | primitives | 14,251 |
| 14 | react-content-loader | 13,370 |
| 15 | react-toastify | 12,188 |
| 16 | ag-Grid | 11,803 |
| 17 | react-spectrum | 11,646 |
| 18 | react-icons | 11,082 |
| 19 | victory | 10,779 |
| 20 | tamagui | 10,083 |
| 21 | react-native-calendars | 9,208 |
| 22 | react-hot-toast.com | 9,143 |
| 23 | ng-zorro-antd | 8,757 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com