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. Learn more →
Top 23 TypeScript design-system Projects
-
Project mention: Accessible by Default: The Non-Negotiable Frontier of Frontend in 2025 | dev.to | 2025-04-14
Use accessible-first design systems like Material UI or Chakra UI.
-
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.
-
Project mention: The Google Fit APIs will no longer be available after June 30, 2025 | news.ycombinator.com | 2024-08-27
Just in recent months:
1. Google no longer developing Material Web Components (https://github.com/material-components/material-web/discussi...)
2. Google Drops Support for Flutter
3. Google Drops Support for Dart (https://stackademic.com/blog/google-drops-support-for-flutte...)
4. And what else I did not hear about ...
Think about the consequences on startups with small budgets ...
-
semi-design
🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻💻 Design to Code in one click
-
Project mention: ✨10 Stunning Icon Libraries to Check Out (That Are Free and Open-Source) 🚀 | dev.to | 2025-02-15
Website: Carbon Icons GitHub Repo: GitHub Repo
-
-
-
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...
-
InfluxDB
InfluxDB high-performance time series database. Collect, organize, and act on massive volumes of high-resolution data to power real-time intelligent systems.
-
If you still think a polymorphic component would be better, really can't deal with plain HTML, or don’t want to write CSS in a separate file (though I am not sure why), my next suggestion would be to take a look at PandaCSS and create custom patterns or explore other options like vanilla-extract. In my opinion, these tools are an over-engineered CSS metalanguage but still better than a polymorphic component.
-
-
-
-
-
gluestack-ui
React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
Project mention: gluestack-ui v2: Stable Release with NativeWind v4.1 Support 🚀 | dev.to | 2025-01-07Have questions, or feedback, or want to showcase what you’re building with gluestack-ui v2? Join the conversation on GitHub, Twitter, or our Discord community.
-
-
-
-
Vue Styleguidist Website
-
-
ui
Franken UI is an open-source library of UI components. Under the hood, it uses UIkit 3 and extended with LitElement. The design is based on shadcn/ui. (by franken-ui)
Created by an independent developer, Sveltecult, Franken UI is still relatively new but is gradually gaining popularity among developers. At the time of writing, it has just over 1K GitHub stars.
-
-
-
catalog
The Magic Patterns Catalog is an open-source website that lists the most popular React component libraries, helping you find the perfect component.
-
Because I'm using Radix Colors here, I don't need to set the .dark scope as that's already done for me. If you don't like the Radix colors, you can customise them, use another library or write your own.
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
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-system discussion
TypeScript design-system related posts
-
Comparing Radix Angular and Angular CDK: A Practical Perspective
-
Configuring Tailwind as a Design System
-
Huetone for Accessible Color Systems
-
The Google Fit APIs will no longer be available after June 30, 2025
-
What are Web Components
-
Migrating from Radix to React Aria: Enhancing Accessibility and UX at Argos
-
What UI density means and how to design for it
-
A note from our sponsor - Civic Auth
www.civic.com | 24 Apr 2025
Index
What are some of the best open-source design-system projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | chakra-ui | 38,951 |
| 2 | material-web | 9,809 |
| 3 | semi-design | 9,092 |
| 4 | carbon | 8,307 |
| 5 | React95 | 6,872 |
| 6 | eui | 6,161 |
| 7 | polaris | 5,913 |
| 8 | panda | 5,491 |
| 9 | theme-ui | 5,336 |
| 10 | arco-design | 5,217 |
| 11 | zeit-ui-react | 4,442 |
| 12 | gestalt | 4,287 |
| 13 | gluestack-ui | 3,680 |
| 14 | React95 | 3,616 |
| 15 | react | 3,504 |
| 16 | arco-design-vue | 2,890 |
| 17 | vue-styleguidist | 2,482 |
| 18 | components | 2,436 |
| 19 | ui | 2,120 |
| 20 | braid-design-system | 1,537 |
| 21 | saas-ui | 1,474 |
| 22 | catalog | 1,462 |
| 23 | colors | 1,435 |
Sponsored
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.
www.civic.com