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..
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Ant Design
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.
Project mention: Tips from open-source: Set a maximum time limit on fetch using Promise.race() | dev.to | 2024-05-07// source: https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/blob/3513c6801e0fd771ccb5784dcaefcac6d50245e4/scripts/fetch-prompts.mjs#L26 async function main() { Promise.all(\[fetchCN(), fetchEN()\]) .then((\[cn, en\]) => { fs.writeFile(FILE, JSON.stringify({ cn, en })); }) .catch((e) => { console.error("\[Fetch\] failed to fetch prompts"); fs.writeFile(FILE, JSON.stringify({ cn: \[\], en: \[\] })); }) .finally(() => { console.log("\[Fetch\] saved to " + FILE); }); } main();
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
It’s Headless so you can use it with whatever UI components you have in your project and as with everything in TanStack it’s type-safe! In this example we'll use components from shadcn/ui to build the form but you can really make it work with any UI library.
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.
Project mention: Integrate Copilot feature into your React applications using CopilotKit | dev.to | 2024-05-03State Management: Zustand
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.
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)
Project mention: Open-source notification infrastructure for developers | news.ycombinator.com | 2024-05-06
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
-
Apple Introduces M4 Chip
-
Headless UI
-
TanStack Form: Setup and simple validation (with shadcn/ui)
-
Show HN: Can AI keep my code up-to-date?
-
Modern React testing, part 5: Playwright
-
How to Set Up Cost-Effective Email Solutions with AWS SES and Terraform
-
Adobe React Spectrum Libraries
-
A note from our sponsor - SurveyJS
surveyjs.io | 7 May 2024
Index
What are some of the best open-source React projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | freeCodeCamp | 389,679 |
2 | Material UI | 91,692 |
3 | antd | 90,297 |
4 | storybook | 82,881 |
5 | ChatGPT-Next-Web | 68,389 |
6 | superset | 58,956 |
7 | shadcn/ui | 57,417 |
8 | Docusaurus | 52,968 |
9 | Ionic Framework | 50,430 |
10 | zustand | 42,708 |
11 | hyperterm | 42,688 |
12 | styled-components | 40,103 |
13 | TanStack Query | 39,775 |
14 | ant-design-pro | 35,814 |
15 | taro | 34,777 |
16 | trpc | 32,748 |
17 | novu | 32,542 |
18 | appsmith | 31,646 |
19 | SWR | 29,461 |
20 | expo | 29,197 |
21 | slate | 29,033 |
22 | jsoncrack.com | 28,518 |
23 | Mattermost | 28,080 |
Sponsored