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 UI Projects
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
-
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.
-
-
-
-
-
-
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.
-
-
primitives
Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
-
-
-
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.
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
-
-
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
But here’s some good news: there’s already a solution in the JavaScript world called Storybook!
shadcn-svelte is an unofficial Svelte port of shadcn/ui. It's a collection of reusable components that you can copy and paste or use the CLI to add to your Svelte apps. There is no package, no dependencies. You just choose the components you need and customize them to your needs. You can use shadcn-svelte as a reference to build your own component libraries.
👉 https://vuetifyjs.com
Portainer
I am supporting a project where lawyers, advisors can publish articles or news, to get more attention and clients. Initially it was made through TinyMCE, but they wanted not just HTML, but also a way of showing many pictures with interactions. I was seeking UI editor like Medium, and I guess best what I found was EditorJS and during checking its Awesome List there were several carousel plugins and I stopped on this.
Project mention: Ask HN: What's the best charting library for customer-facing dashboards? | news.ycombinator.com | 2024-04-29Chartjs looks great, but I've never used it so can't recommend personally. I've used https://recharts.org a lot with success.
Sunday morning programming fun. Created a little game to compare items from a list head-to-head and pick a winner. Inspired from social media short videos where people choose their favourite food, song, holiday destination etc. There are some example lists of cities, movies, actors, fragrances etc to play with and you can create your own list of items and play.
Check it out - https://yash.info/head-to-head.html
I created it mainly to pick a favourite fragrance from my collection of 50+. Not only is a fun project to build but it also allows me to use some of the interesting libraries and code snippets I find.
Programming logic wise there’s nothing fancy happening here, just picking a random element from an array and doing some JS and CSS around that.
New thing that I got to learn was generating a random color of a specific type (pastel, fluorescent, light) by playing with HSL values in a specific range instead of the RGB.
Discovered https://arraythis.com to convert a list to a JS array.
Used SweetAlert https://sweetalert.js.org for alert messages.
Been coding for 20+ years and such little projects still give me the joy of creation plus you always learn/find something that you did not know yesterday.
Official Website: https://blueprintjs.com/
Project mention: Radix Primitives: an open-source UI component library | news.ycombinator.com | 2024-03-20
Project mention: Big Numbers, No Worries: JavaScript Format Number With Commas | dev.to | 2024-03-23You can use a third-party library, which is a bunch of code that someone else wrote for you. Many awesome third-party libraries can format numbers with commas in JavaScript. For example, you can try Numeral.js, Accounting.js, or Format.js.
Project mention: Framework Interoperable Component Libraries Using Lit Web Components. | dev.to | 2023-10-08I've been very passionate about a project called react-jsonschema-form (github, editor). I personally hate writing forms, and love the idea of serializable components, schema, validation all in one. I've always wanted an alternative to this project that offered an alternative to react, and possibly the ability to render a schema form to static HTML (like ssg).
HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).
Project mention: Would anyone be interested in having me create custom Tailwind CSS Components for them? | /r/nextjs | 2023-12-05https://auto-animate.formkit.com/ some basic inspiration - consider also that this is free and just takes donations.. That model brings people to you and then you can do bespoke projects and charge too
You can check out the site for Tamagui here.
React Cosmos emerges as an invaluable asset among React debugging tools, tailored for both React and React Native projects. It stands out by offering a conducive environment for developers to meticulously work on, test, and iterate UI components, ensuring they seamlessly integrate with the intended application settings.
Nebular (MIT license)
Project mention: Show HN: React95 – a React components library recreating the look of Windows 95 | news.ycombinator.com | 2023-07-09There's another repo on GitHub that does the same. If the number of stars is of any significance, they have more. See: https://react95.io/ or https://github.com/react95-io/React95
Project mention: Free Next.js Boilerplate for ⚡️High-Performance⚡️ Enterprise Apps | dev.to | 2023-05-18The next-enterprise is an open-source template developed by Blazity that provides a robust set of features for building enterprise projects. It offers high-performance, maintainable and enjoyable web app development, making it an excellent choice for developers who want to streamline their workflow.
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 related posts
-
Maintainer Monday
-
How to Set Up Cost-Effective Email Solutions with AWS SES and Terraform
-
I'm giving up on open source
-
ChatCraft v2.0.0
-
ChatCraft week 14: Releasing v2.0!
-
Contributing to Open Source Project ChatCraft
-
Release v1.9.0 - ChatCraft.org
-
A note from our sponsor - SurveyJS
surveyjs.io | 17 May 2024
Index
What are some of the best open-source UI projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | storybook | 82,997 |
| 2 | shadcn/ui | 58,619 |
| 3 | vuetify | 39,087 |
| 4 | Portainer | 29,109 |
| 5 | Editor.js | 26,990 |
| 6 | docz | 23,516 |
| 7 | recharts | 22,803 |
| 8 | SweetAlert | 22,357 |
| 9 | @blueprintjs/core | 20,443 |
| 10 | primitives | 14,392 |
| 11 | React Intl | 14,088 |
| 12 | react-jsonschema-form | 13,702 |
| 13 | shoelace-css | 12,093 |
| 14 | auto-animate | 11,709 |
| 15 | tamagui | 10,110 |
| 16 | cosmos-js | 8,133 |
| 17 | nebular | 8,016 |
| 18 | kittenTricks | 7,102 |
| 19 | arwes | 6,981 |
| 20 | React95 | 6,393 |
| 21 | react-native-ui-lib | 6,184 |
| 22 | graphql-editor | 5,940 |
| 23 | next-enterprise | 5,568 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com