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 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
But here’s some good news: there’s already a solution in the JavaScript world called Storybook!
👉 https://vuetifyjs.com
SvelteUI includes 50+ customizable, accessible Svelte components. The components are built with TypeScript and support it by default. In addition to the components, the library includes out-of-the-box actions, transitions, and utilities. In general, it's a nice-looking library, heavily inspired by Mantine, with good documentation. The latest major update was released in August 2023.
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/
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.
Install the React Icons package, which allows us to use various icons within the application.
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.
You can check out the site for Tamagui here.
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
-
HugeMCE forks the last TinyMCE MIT license
-
How To Build Your Own Newsletter App? p.1
-
SASS, CSS, or Tailwind: Which One Should You Choose?
-
How I Build Paradise UI: A React UI Component Library
-
TinyMCE 7.1 Release Notes - Overview
-
9 React Calendar Components for Your Next App
-
Collab Chronicles: Exploring the Collaborative Experience
-
A note from our sponsor - InfluxDB
www.influxdata.com | 20 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,997 |
| 2 | vuetify | 39,117 |
| 3 | slate | 29,078 |
| 4 | react-select | 27,297 |
| 5 | mantine | 24,657 |
| 6 | react-table | 24,223 |
| 7 | tiptap | 24,101 |
| 8 | react-dnd | 20,568 |
| 9 | NativeBase | 20,033 |
| 10 | lexical | 17,494 |
| 11 | naive-ui | 15,321 |
| 12 | TinyMCE | 14,433 |
| 13 | primitives | 14,392 |
| 14 | react-content-loader | 13,383 |
| 15 | react-toastify | 12,228 |
| 16 | ag-Grid | 11,857 |
| 17 | react-spectrum | 11,838 |
| 18 | react-icons | 11,132 |
| 19 | victory | 10,789 |
| 20 | tamagui | 10,155 |
| 21 | react-native-calendars | 9,229 |
| 22 | react-hot-toast.com | 9,199 |
| 23 | ng-zorro-antd | 8,763 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com