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 React Projects
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
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.
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
ChatGPT-Next-Web
A cross-platform ChatGPT/Gemini UI (Web / PWA / Linux / Win / MacOS). 一键拥有你自己的跨平台 ChatGPT/Gemini 应用。
-
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
-
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.
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
TanStack Query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
-
taro
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
-
novu
🔥 The open-source notification infrastructure with fully functional embedded notification center 🚀🚀🚀
-
appsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
-
expo
An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
-
slate
A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)
-
jsoncrack.com
✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.
-
Mattermost
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
-
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.
Ant Design
[Bug]: Configuration with TailwindCss Next.js using Tailwind with Storybook
ChatGPT-Next-Web is a cross-platform UI for ChatGPT (or Gemini), available as a web app or as a compact client on Linux, Windows and MacOS. You can also deploy ChatGPT-Next-Web on Vercel in just a minute.
Superset is absolutely phenomenal. I really hope Microsoft eventually releases all of their customizations they made to it internally to the OS community someday.
https://www.youtube.com/watch?v=RY0SSvSUkMA
https://github.com/apache/superset/discussions/20094
Project mention: System & Database Design (Day 1) - Creating a SaaS Startup in 30 Days | dev.to | 2024-04-26Shadcn/ui: I've never tried it before but have always wanted to switch from MaterialUI
Docusaurus is a popular open-source documentation tool primarily designed for product documentation and other technical documentation needs. It was first released in 2017 by Facebook Open Source (now Meta Open Source). Just recently, Docsaurus version 3.0 was released.
I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.
I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.
For our case, points 1 and 2 can help us provide a better way of handling updates in our rapidly updating application. I have used zustand for the application.
CSS-in-JS is a styling technique wherein CSS is composed using JavaScript instead of defined in external files. This method allows CSS to be scoped locally to components rather than globally, reducing the probability of style conflicts. Utilizing JavaScript also enables dynamic styling easily aligned with the component's state or props. Libraries like Styled Components and Emotion are popular choices in the React ecosystem for adopting this method.
Project mention: Tremor – The React library to build dashboards fast | news.ycombinator.com | 2023-07-28As per refine.dev blog, these are some alternatives to Tremor:
* Ant design pro (https://github.com/ant-design/ant-design-pro/)
RESTful API: RESTful API does not have machine-readable metadata cacheable, and query validation is not available.(There are some libraraies tried to solve this issue like TRPC)
I'll guide you on how to swiftly build an In-App Notification system for your next app using Novu and the Dev.to API. While it might not exactly resemble the system mentioned above, it'll have many similarities.
Project mention: A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev | dev.to | 2024-02-05appsmith — Low code project to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API.
Link: https://swr.vercel.app/
Project mention: JSONCrack Codebase Analysis - Part 5 - Toolbar and Bottom bar | dev.to | 2024-01-09They are used in Editor component. Part 4 explains about Editor component.
Project mention: Discord to Start Showing Ads for Gamers to Boost Revenue | news.ycombinator.com | 2024-04-01> Tell me another platform that is free, has realtime chat, voice and video, has stable service, allows sharing images and other media, with good ownership management... and is open source.
Mattermost: https://mattermost.com/
Rocket.Chat: https://www.rocket.chat/
Nextcloud Talk: https://nextcloud.com/talk/
Self hosting and some assembly required. I've run all of them on cheap VPSes to explore a Slack/Discord replacement, neither was mindblowing but all of them seemed okay (Nextcloud's offering was rather barebones, though).
Audio and video support varies because getting those right is challenging, at best you'd just integrate with something like Jitsi, that one's actually pretty good for meetings and such: https://jitsi.org/ and has a cloud version too: https://meet.jit.si/ (yet people still go for Zoom and it's odd UI/UX choices)
I actually rather liked forums back in the day, but I guess nobody will be setting up that many phpBB instances in the current year, though projects like Discourse also seem promising: https://www.discourse.org/
I don't think many people at all will be leaving Discord, due to how entrenched the platform is (network effect): if you want people to help you with what you're working on, you go where they are, not vice versa.
TypeScript React related posts
- Path To A Clean(er) React Architecture - API Layer & Fetch Functions
- JoblessDev: New Open-Source CS Job Platform for Students and Recent Grads
- 9 React Calendar Components for Your Next App
- IT Healthcare: Its Importance, Challenges And How To Find Good Healthcare Data
- Approaches to Styling React Components, Best Use Cases
- Best way to handle forms in Remix.run
- Collab Chronicles: Exploring the Collaborative Experience
-
A note from our sponsor - SurveyJS
surveyjs.io | 27 Apr 2024
Index
What are some of the best open-source React projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | freeCodeCamp | 387,899 |
2 | Material UI | 91,600 |
3 | antd | 90,129 |
4 | storybook | 82,810 |
5 | ChatGPT-Next-Web | 68,127 |
6 | superset | 58,737 |
7 | shadcn/ui | 56,834 |
8 | Docusaurus | 52,824 |
9 | Ionic Framework | 50,410 |
10 | hyperterm | 42,633 |
11 | zustand | 42,526 |
12 | styled-components | 40,087 |
13 | TanStack Query | 39,627 |
14 | ant-design-pro | 35,789 |
15 | taro | 34,707 |
16 | trpc | 32,672 |
17 | novu | 32,478 |
18 | appsmith | 31,551 |
19 | SWR | 29,431 |
20 | expo | 29,062 |
21 | slate | 28,980 |
22 | jsoncrack.com | 28,426 |
23 | Mattermost | 28,049 |
Sponsored