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.
We are continuing to make building fullstack websites and application with Analog and Angular as seamless as possible, and extending the Angular ecosystem through integrations with Astro, Nx, [Vitest]https://analogjs.org/docs/features/testing/vitest, Storybook, and more.
-
👉 https://vuetifyjs.com
-
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)
-
I decided that I wanted to use React Select for the player input, specifically React Select Creatable, which allows users to create a new option if the one that they are looking for does not exist. With this approach, if the player that the user is trying to add as one of the game's players is not already in the database, they can add the player directly from the React Select component instead of having to do this though the seperate form for adding a new player.
-
react-table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Tanstack - Tanstack has evolved to an entire ecosystem consisting of the famous Tanstack (or React) Query, Tanstack Table, now also Tanstack Router and Tanstack Form. It started with Tanstack Query, which adopted Nx and Nx Cloud. Zack talked about this collab with Dominik, and we also had Dominik on our Nx live stream. Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.
-
Project mention: Shadcn: Beautifully designed components that you can copy-paste into your apps | news.ycombinator.com | 2024-01-12
Great compilation. Thanks for putting that together.
Curious what your take is on these UI libraries that "claim" they are accessible:
https://mantine.dev - "Build fully functional accessible web applications faster than ever"
-
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.
-
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.
-
react-dnd is quite powerful but a bit complex and requires some getting used to.
-
NativeBase
Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
Native-base
-
lexical
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
Lexical (https://lexical.dev/) is really nice to use and doesn't use Prosemirror or CKEditor.
-
You can also check NaiveUI https://www.naiveui.com/
-
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.
Fast forward to a week ago, I cloned the Reach UI and Radix UI codebase and started exploring. Large codebases are always difficult to comprehend. With some digging around and reverse engineering, I was able to create the first component listed in the Reach UI docs, the Accordion.
-
Project mention: How can I get a screen to load like this until data is got | /r/reactnative | 2023-03-20
-
React-Toastify is one of the most popular toast UI libraries for React or Next.js. It's easy to configure and use, but integrating it with the App router makes the configuration part a bit tricky. There is an open issue about this topic, and while you can find some solutions there, they aren't summarized. So in this article, I'll provide a summarized version of the solution to integrate React-Toastify with Next.js App router.
-
ag-Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
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.
-
react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
Project mention: Accessibility and Headless UI Libraries - Adobe, Radix, Tailwind, MUI | dev.to | 2023-09-24Adobe - React ARIA
-
-
Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31
Victory 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.
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
Project mention: Tamagui – UI kit that unify React Native and Web | news.ycombinator.com | 2023-11-24 -
so for calendars i use this repo lib https://github.com/wix/react-native-calendars wether you're using expo of cli its still a good library to use.
-
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.
-
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.
TypeScript UI Components related posts
- Using React Select with Formik
- TinyMCE Dumping MIT for GPL
- The Secret Weapon of Top Developers: 7 React JS Libraries You Can't Afford to Ignore
- How to use React-Toastify with Next.js App router
- Squeezing more performance out of your Nextjs App
- Curious case of Drag and Drop
- React: Build your own composable, headless components
-
A note from our sponsor - InfluxDB
www.influxdata.com | 18 Mar 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,368 |
2 | vuetify | 38,857 |
3 | slate | 28,813 |
4 | react-select | 27,141 |
5 | react-table | 23,780 |
6 | mantine | 23,723 |
7 | tiptap | 23,270 |
8 | react-dnd | 20,337 |
9 | NativeBase | 19,960 |
10 | lexical | 16,962 |
11 | naive-ui | 14,928 |
12 | TinyMCE | 14,147 |
13 | primitives | 13,699 |
14 | react-content-loader | 13,282 |
15 | react-toastify | 12,034 |
16 | ag-Grid | 11,563 |
17 | react-spectrum | 11,348 |
18 | react-icons | 10,918 |
19 | victory | 10,745 |
20 | tamagui | 9,662 |
21 | react-native-calendars | 9,107 |
22 | react-hot-toast.com | 8,943 |
23 | ng-zorro-antd | 8,719 |