Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more. Learn more →
Top 22 TypeScript design-system Projects
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
MUI is the OG of UI component libraries. They’ve been at the top back since when Bootstrap was a contender and are still maintaining a top spot in the era of Tailwind and other UI libraries. With more than 95k GitHub stars (and counting), and top companies using it in production, I’d say this is the open-source React component library with the most stars. MUI also has paid components available for enterprise users.
-
SurveyJS
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
-
Preview site: https://ant.design/
-
storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
In this tutorial, you'll learn how to build a monorepo using Lerna. We’ll be building a Next.js application which will import components from a separate package. We’ll also be using Storybook to showcase those components.
-
primitives
Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
shadcn/ui contains a set of beautifully designed and accessible components, and it works seamlessly with major React frameworks. It’s open-source and has amassed 85.5k (and counting) GitHub stars. It’s built on the shoulders of giants — Radix UI and Tailwind CSS, making it one of the best to work with. Unlike many other UI libraries, the components are not just installed as npm modules, they’re downloaded into your project. That gives you access to the source code and you can modify it if you want. I like this approach better because I can tweak aspects of a component if I want to.
-
react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
8. React Spectrum Adobe’s design system, offering accessible components for building consistent, adaptive, and delightful user experiences. React Spectrum:
-
Project mention: Show HN: Self-Hostable Algolia DocSearch Replacement | news.ycombinator.com | 2024-10-11
Example PR: https://github.com/microsoft/fast/pull/7031/files
If you want hosted-search:
-
-
Civic Auth
Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.
-
themes
Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
-
polaris
Shopify’s design system to help us work together to build a great experience for all of our merchants.
Project mention: Knowing CSS is mastery to Front end Development | news.ycombinator.com | 2025-03-02You're leaving out the most important bit of a component like InlineStack: the props [0]. Yes you can just apply `display: flex` to the div you're working on, but like any proper abstraction these guardrails make using flexbox correctly the easiest path forward (the "pit of a success").
[0]: https://github.com/Shopify/polaris/blob/eb6161f6b4e02679b5e8...
-
-
-
-
-
Is this really the main use case?
The product website seems to suggest we can add DaisyUI to a React project -- and proceed with development with no additional notes on replacing the styles later before production
[1] https://react.daisyui.com/?path=/story/data-display-table--w...
-
-
-
-
-
-
-
ui
Rad UI is an open-source, headless UI component library for building modern, fast, performant, accessible React applications (by rad-ui)
-
Adaptive-Web-Components
The Web Component library built on Open Web Standards & Adaptive UI technologies
-
InfluxDB
InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.
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 design-systems discussion
TypeScript design-systems related posts
-
Knowing CSS is mastery to Front end Development
-
Top 20 Modern React Libraries To Supercharge Your Next Big Project
-
Explaining Scoped Context in React with example
-
Cursor AI: 5 Advanced Features You're Not Using
-
Ask HN: How can I improve UI dev skills? Looking for real-world examples
-
8 Most Customizable UI Libraries for Next.js
-
Headless UI alternatives: Radix Primitives, React Aria, Ark UI
-
A note from our sponsor - SurveyJS
surveyjs.io | 12 May 2025
Index
What are some of the best open-source design-system projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | Material UI | 95,550 |
| 2 | antd | 94,562 |
| 3 | storybook | 86,563 |
| 4 | primitives | 17,068 |
| 5 | react-spectrum | 13,850 |
| 6 | fast | 9,441 |
| 7 | base web | 8,826 |
| 8 | themes | 6,743 |
| 9 | polaris | 5,927 |
| 10 | plasmic | 5,691 |
| 11 | playroom | 4,525 |
| 12 | zeit-ui-react | 4,448 |
| 13 | zag | 4,390 |
| 14 | react-daisyui | 1,016 |
| 15 | design-system | 723 |
| 16 | noya | 441 |
| 17 | grail-ui | 382 |
| 18 | moon-design | 275 |
| 19 | ebs-design | 251 |
| 20 | kaizen-design-system | 164 |
| 21 | ui | 72 |
| 22 | Adaptive-Web-Components | 41 |
Sponsored
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor
Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
surveyjs.io