SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript UI Projects
-
shadcn/ui
A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.
Project mention: Show HN: Basecoat – shadcn/UI with none of the React | news.ycombinator.com | 2025-05-08In a nutshell: Basecoat is a port of shadcn/ui to HTML and Tailwind CSS. It's a modern, themeable component library; everything from buttons to comboboxes and dialogs.
Why? Well, I got sick of React and moved over to a more "old school" stack (Python, HTMX, Alpine.js and Tailwind).
The one thing I missed was shadcn/ui [1]. Nice defaults, well thought out design system, easy to theme and great to build your own component library with.
I didn't find the alternatives compelling: Flowbite, Preline and the likes encourage you to copy/paste dozens of classes for each element.
That's not how I use Tailwind. I love the utility-first approach, but I don't want walls of classes for each button, form element or tooltip I have in my app.
I had been building my own component library for a project I’m working on (a Vercel for Python apps) and realized it may be worth my time to firm things up.
Why I think it's cool? Well:
- No React. Just Tailwind CSS (with a tiny bit of Alpine.js if you choose to). You can use that with whatever stack you want.
- Jinja and Nunjucks macros. I hope to support more template engines.
- 100% compatible with shadcn/ui themes (you can play with the theme select box on the site).
- Super easy to install and use (there's even a CLI).
- Accessible, with ARIA support.
- Did I mention no React?
Hope some of you find it useful.
[1]: https://ui.shadcn.com/
[2]: https://v4.shadcn.com/ (this is actually the new/upcoming version of shadcn/ui).
-
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.
-
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.
-
Project mention: How to adapt an autocomplete/select field to work with server-side filtering and pagination | dev.to | 2024-09-04
The technical implementation will be demonstrated with Vue, my preferred framework for everyday work, combined with Vuetify, a very robust and highly customizable component framework commonly used in the Vue ecosystem. Note that concepts used here can be applied using other combinations of popular JavaScript technologies.
-
Portainer container management UI
-
Yesterday, I spoke about Editor.js. Today, I purpose an implementation for Symfony with EasyAdmin for a properties of type json on a Doctrine entity.
-
Project mention: Demystifying npm package installation: Insights, analysis and optimization tips | dev.to | 2025-04-22
In order to run each scenario, there must be a package.json file present. For this analysis, we will use the following package.json file. This is a real package.json file, that I've used when creating a simple demo of Recharts library.
-
-
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.
-
Blueprint UI
-
react-native-vector-icons
Customizable Icons for React Native with support for image source and full styling.
Next install the react-native-vector-icons as it's a peer dependency of the library.
-
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.
-
Thanks for your feedback !
It does not rely on JSON schema at all, the idea was to build a representation that binds together data structure, views and behavior in a self-contained way (like .xlsx does).
There are a few tools that do enable to link JSON schema to views, like react-jsonschema-form (https://rjsf-team.github.io/react-jsonschema-form/) but you need to manage them separately, and they usually do not propose a way to add the fields "methods" (which was the feature I found interesting to make "dynamic" spreadsheets).
That being said, I think the framework should clearly propose an export from Schema to JSON Schema or Yaml at some point, just as you should be able to start building your Schema by importing a JSON Schema (and although there might be some gray zones between the 2).
No, sorry, it's not yet open-source, and currently there are some strong links between Document and Workspace (Links, Files...) that would need to be more "abstracted" to make the builder an independent component. But I hear you point ! (and all the comments in this thread are raising the same ! :) )
-
Project mention: "Polyfill.io sold to a weird Chinese company and should no longer be recommended | news.ycombinator.com | 2024-06-26
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
-
auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
Auto Animate
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
GitHub repository
-
PrimeNG: has a lot of components, can be styled using CSS variables, and has a plugin for Tailwind CSS support;
-
-
-
nebular
:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
-
-
kittenTricks
React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.
-
-
next-enterprise
💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
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 UI discussion
TypeScript UI related posts
-
Show HN: Basecoat – shadcn/UI components, no React required
-
Why I’m Learning Vue.js After Six Years in React
-
Building a React-Based Guitar Theory Practice Page: Connecting Theory and Application
-
Top 5 Free React UI Libraries to Use in 2025
-
Implementing Arpeggios in the CAGED System for Guitar
-
Simplify TypeScript Error Handling with the Attempt Pattern
-
OSD 700 - RAG Integration: Stage 3
-
A note from our sponsor - SaaSHub
www.saashub.com | 18 May 2025
Index
What are some of the best open-source UI projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | shadcn/ui | 86,928 |
| 2 | storybook | 86,631 |
| 3 | vuetify | 40,481 |
| 4 | Portainer | 32,954 |
| 5 | Editor.js | 30,183 |
| 6 | recharts | 25,147 |
| 7 | SweetAlert | 22,390 |
| 8 | @blueprintjs/core | 21,050 |
| 9 | react-native-vector-icons | 17,630 |
| 10 | primitives | 17,113 |
| 11 | react-jsonschema-form | 14,826 |
| 12 | React Intl | 14,481 |
| 13 | shoelace-css | 13,451 |
| 14 | auto-animate | 13,369 |
| 15 | tamagui | 12,528 |
| 16 | primeng | 11,520 |
| 17 | chainlit | 9,647 |
| 18 | cosmos-js | 8,469 |
| 19 | nebular | 8,098 |
| 20 | arwes | 7,236 |
| 21 | kittenTricks | 7,204 |
| 22 | React95 | 6,872 |
| 23 | next-enterprise | 6,816 |
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