TypeScript UI

Open-source TypeScript projects categorized as UI

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.

  • Project mention: Storybook not picking up tailwindcss | dev.to | 2024-04-17

    [Bug]: Configuration with TailwindCss Next.js using Tailwind with Storybook

  • shadcn/ui

    Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

  • Project mention: System & Database Design (Day 1) - Creating a SaaS Startup in 30 Days | dev.to | 2024-04-26

    Shadcn/ui: I've never tried it before but have always wanted to switch from MaterialUI

  • 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.

    SurveyJS logo
  • vuetify

    ๐Ÿ‰ Vue Component Framework

  • Project mention: Top Material Design 3 web frameworks of 2024 | dev.to | 2024-01-23

    ๐Ÿ‘‰ https://vuetifyjs.com

  • Portainer

    Making Docker and Kubernetes management easy.

  • Project mention: Homelab Adventures: Crafting a Personal Tech Playground | dev.to | 2024-04-22

    Portainer

  • Editor.js

    A block-style editor with clean JSON output

  • Project mention: How I optimized Carousel for EditorJS 2x in size. | dev.to | 2024-03-29

    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.

  • docz

    โœ It has never been so easy to document your things!

  • recharts

    Redefined chart library built with React and D3

  • Project mention: recharts VS MUI X - a user suggested alternative | libhunt.com/r/recharts | 2024-01-20
  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • SweetAlert

    A beautiful replacement for JavaScript's "alert"

  • @blueprintjs/core

    A React-based UI toolkit for the web

  • Project mention: React Component Libraries | dev.to | 2024-03-13

    Official Website: https://blueprintjs.com/

  • primitives

    Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

  • Project mention: Radix Primitives: an open-source UI component library | news.ycombinator.com | 2024-03-20
  • React Intl

    The monorepo home to all of the FormatJS related libraries, most notably react-intl.

  • Project mention: Big Numbers, No Worries: JavaScript Format Number With Commas | dev.to | 2024-03-23

    You 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.

  • react-jsonschema-form

    A React component for building Web forms from JSON Schema.

  • Project mention: Framework Interoperable Component Libraries Using Lit Web Components. | dev.to | 2023-10-08

    I'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).

  • shoelace-css

    A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

  • Project mention: Htmx and the Rule of Least Power | news.ycombinator.com | 2024-04-12

    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).

  • 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.

  • Project mention: Would anyone be interested in having me create custom Tailwind CSS Components for them? | /r/nextjs | 2023-12-05

    https://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

  • tamagui

    Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.

  • Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29

    Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:

  • cosmos-js

    Sandbox for developing and testing UI components in isolation

  • Project mention: 13 best React debugging tools | dev.to | 2024-01-03

    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

    :boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

  • Project mention: The big Angular UI library comparison ๐Ÿ“š | dev.to | 2023-12-11

    Nebular (MIT license)

  • kittenTricks

    React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.

  • arwes

    Futuristic Sci-Fi UI Web Framework.

  • Project mention: A 17th-century font in a 21st-century thesis | news.ycombinator.com | 2023-07-20
  • React95

    ๐ŸŒˆ๐Ÿ•น Windows 95 style UI component library for React

  • Project mention: Show HN: React95 โ€“ a React components library recreating the look of Windows 95 | news.ycombinator.com | 2023-07-09

    There'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

  • react-native-ui-lib

    UI Components Library for React Native

  • graphql-editor

    ๐Ÿ“บ Visual Editor & GraphQL IDE.

  • Project mention: Navigable graph view for any GraphQL schema | news.ycombinator.com | 2023-10-19
  • 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.

  • Project mention: Free Next.js Boilerplate for โšก๏ธHigh-Performanceโšก๏ธ Enterprise Apps | dev.to | 2023-05-18

    The 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.

  • 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.

    InfluxDB logo
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

Index

What are some of the best open-source UI projects in TypeScript? This list will help you:

Project Stars
1 storybook 82,810
2 shadcn/ui 56,834
3 vuetify 39,024
4 Portainer 28,852
5 Editor.js 26,833
6 docz 23,494
7 recharts 22,600
8 SweetAlert 22,357
9 @blueprintjs/core 20,409
10 primitives 14,192
11 React Intl 14,068
12 react-jsonschema-form 13,630
13 shoelace-css 11,962
14 auto-animate 11,618
15 tamagui 9,992
16 cosmos-js 8,112
17 nebular 8,008
18 kittenTricks 7,095
19 arwes 6,970
20 React95 6,375
21 react-native-ui-lib 6,144
22 graphql-editor 5,937
23 next-enterprise 5,481

Sponsored
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.
www.influxdata.com