TypeScript UI Components

Open-source TypeScript projects categorized as UI Components

Top 23 TypeScript UI Component Projects

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    Project mention: Announcing AnalogJS 1.0 🚀 | dev.to | 2024-03-14

    We are continuing to make building fullstack websites and application with Analog and Angular as seamless as possible, and extending the Angular ecosystem through integrations with Astro, Nx, [Vitest]https://analogjs.org/docs/features/testing/vitest, Storybook, and more.

  • vuetify

    🐉 Vue Component Framework

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

    👉 https://vuetifyjs.com

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

  • slate

    A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)

    Project mention: 5 Not-So-Typical React Libraries for an Outstanding Project | dev.to | 2023-08-03
  • react-select

    The Select Component for React.js

    Project mention: Using React Select with Formik | dev.to | 2024-03-18

    I decided that I wanted to use React Select for the player input, specifically React Select Creatable, which allows users to create a new option if the one that they are looking for does not exist. With this approach, if the player that the user is trying to add as one of the game's players is not already in the database, they can add the player directly from the React Select component instead of having to do this though the seperate form for adding a new player.

  • react-table

    🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

    Project mention: Nx - Highlights of 2023 | dev.to | 2023-12-28

    Tanstack - Tanstack has evolved to an entire ecosystem consisting of the famous Tanstack (or React) Query, Tanstack Table, now also Tanstack Router and Tanstack Form. It started with Tanstack Query, which adopted Nx and Nx Cloud. Zack talked about this collab with Dominik, and we also had Dominik on our Nx live stream. Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.

  • mantine

    A fully featured React components library

    Project mention: Shadcn: Beautifully designed components that you can copy-paste into your apps | news.ycombinator.com | 2024-01-12

    Great compilation. Thanks for putting that together.

    Curious what your take is on these UI libraries that "claim" they are accessible:

    https://mantine.dev - "Build fully functional accessible web applications faster than ever"

  • tiptap

    The headless rich text editor framework for web artisans.

    Project mention: Encrypted Note Editor App In React Native | dev.to | 2024-03-04

    The Editor: The core of our app is the editor. We need an easy to use and robust rich text editor, that supports all of the features we want such as: headings, lists, placeholders, markdown, color, images, bold italic etc… For this we will use @10play/tentap-editor which is a rich text editor for react native based on Tiptap.

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

  • react-dnd

    Drag and Drop for React

    Project mention: Curious case of Drag and Drop | dev.to | 2024-01-30

    react-dnd is quite powerful but a bit complex and requires some getting used to.

  • NativeBase

    Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

    Project mention: Flash-cards app with OpenAI | dev.to | 2023-10-19

    Native-base

  • lexical

    Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

    Project mention: Wax: The Word Processor for the Web | news.ycombinator.com | 2024-02-26

    Lexical (https://lexical.dev/) is really nice to use and doesn't use Prosemirror or CKEditor.

  • naive-ui

    A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.

    Project mention: Vue UI kits/component libraries? | /r/vuejs | 2023-12-09

    You can also check NaiveUI https://www.naiveui.com/

  • TinyMCE

    The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

    Project mention: TinyMCE Dumping MIT for GPL | news.ycombinator.com | 2024-02-29
  • 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: React: Build your own composable, headless components | dev.to | 2024-01-22

    Fast forward to a week ago, I cloned the Reach UI and Radix UI codebase and started exploring. Large codebases are always difficult to comprehend. With some digging around and reverse engineering, I was able to create the first component listed in the Reach UI docs, the Accordion.

  • react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

    Project mention: How can I get a screen to load like this until data is got | /r/reactnative | 2023-03-20
  • react-toastify

    React notification made easy 🚀 !

    Project mention: How to use React-Toastify with Next.js App router | dev.to | 2024-02-05

    React-Toastify is one of the most popular toast UI libraries for React or Next.js. It's easy to configure and use, but integrating it with the App router makes the configuration part a bit tricky. There is an open issue about this topic, and while you can find some solutions there, they aren't summarized. So in this article, I'll provide a summarized version of the solution to integrate React-Toastify with Next.js App router.

  • ag-Grid

    The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

    Project mention: How To Enhance AG Grid with Avatars: Building a Collaborative Grid with React and Ably | dev.to | 2024-01-26

    In this post I’ll show you how, using the AG Grid component and Ably Spaces, you can create a React application that allows users to see not only who else is currently viewing the grid, but using a Flowbite Avatar Stack component, what row each user currently has selected.

  • react-spectrum

    A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

    Project mention: Accessibility and Headless UI Libraries - Adobe, Radix, Tailwind, MUI | dev.to | 2023-09-24

    Adobe - React ARIA

  • react-icons

    svg react icons of popular icon packs

    Project mention: Squeezing more performance out of your Nextjs App | dev.to | 2024-02-05
  • victory

    A collection of composable React components for building interactive data visualizations

    Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31

    Victory is a set of modular charting components for React and React Native. Victory makes it easy to get started without sacrificing flexibility. Create one of a kind data visualizations with fully customizable styles and behaviors. Victory uses the same API for web and React Native applications for easy cross-platform charting.

  • tamagui

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

    Project mention: Tamagui – UI kit that unify React Native and Web | news.ycombinator.com | 2023-11-24
  • react-native-calendars

    React Native Calendar Components 🗓️ 📆

    Project mention: How would i go about building this? | /r/reactnative | 2023-03-21

    so for calendars i use this repo lib https://github.com/wix/react-native-calendars wether you're using expo of cli its still a good library to use.

  • react-hot-toast.com

    Smoking Hot React Notifications 🔥

    Project mention: Modal and Toast dynamic global apporach | /r/nextjs | 2023-12-07

    React-hot-toast manages its state outside of react you can have a look for yourself: https://github.com/timolins/react-hot-toast/blob/main/src/core/store.ts it just listens to changes that occur to their own managed store :) - pretty much how all "global state libraries" work

  • ng-zorro-antd

    Angular UI Component Library based on Ant Design

    Project mention: An Overview of 25+ UI Component Libraries in 2023 | dev.to | 2023-09-10

    Ant Design: A solid option that is been used by a lot of heavy hitters, such as Tencent, Baidu, AliBaba, and more. Supports all modern browsers, SSR, esm, and even Electron. Has also community implementations for Angular, Vue, and more. Does use CSS-in-JS, so expect runtime overhead as well as AntD ways of doing things.

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

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). The latest post mention was on 2024-03-18.

TypeScript UI Components related posts

Index

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

Project Stars
1 storybook 82,368
2 vuetify 38,857
3 slate 28,813
4 react-select 27,141
5 react-table 23,780
6 mantine 23,723
7 tiptap 23,270
8 react-dnd 20,337
9 NativeBase 19,960
10 lexical 16,962
11 naive-ui 14,928
12 TinyMCE 14,147
13 primitives 13,699
14 react-content-loader 13,282
15 react-toastify 12,034
16 ag-Grid 11,563
17 react-spectrum 11,348
18 react-icons 10,918
19 victory 10,745
20 tamagui 9,662
21 react-native-calendars 9,107
22 react-hot-toast.com 8,943
23 ng-zorro-antd 8,719
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