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: Getting Tailwind to Work with Elm Book | dev.to | 2022-11-28

    Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • vuetify

    🐉 Material Component Framework for Vue

    Project mention: What’s new in Handsontable Data Grid: November 2022 | dev.to | 2022-11-30

    Vuetify 3.0 brings various bug fixes and new features, including keyboard navigation

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Project mention: MongoDB 2022 Hackathon submission - Introducing Indian dishes catalog | dev.to | 2022-11-23

    Then I deployed the API on render as a web service to consume the API on the front-end of the project built with ReactJs and Chakra UI.

  • slate

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

    Project mention: Slate | Editor in 10min with Next.js and TS ✍️ | dev.to | 2022-10-17

    Link to Repo

  • react-select

    The Select Component for React.js

    Project mention: Handling Types In 3rd Party Packages in React/Node | reddit.com/r/typescript | 2022-10-08

    It shows that react-google-places-autocomplete is using the previous version of react-select. Let's check that previous version. Aha! The previous version is not written in TypeScript, and does not have TS types. Let's check the documentation also (always check the documentation!), and they explain how the current version was rewritten in TypeScript.

  • react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: React Native Top UI Components Libraries | dev.to | 2022-07-28

    Github Documentation Stars ⭐ +22.6k

  • react-table

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

    Project mention: Sometimes things only work in strict mode | reddit.com/r/reactjs | 2022-11-18
  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

  • NativeBase

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

    Project mention: is there a react native equal to MUI for reactjs? | reddit.com/r/reactnative | 2022-11-30

    I'll suggest going with native base and react native paper . As these are only 2 libraries up there which are efficient and give some good results.

  • react-dnd

    Drag and Drop for React

    Project mention: How to Implement Drag and Drop in React | dev.to | 2022-10-05

    react-dnd: This is very popular, but it’s a bit complex to use.

  • tiptap

    The headless editor framework for web artisans.

    Project mention: Making appp | reddit.com/r/golang | 2022-11-24

    You could use tiptap (tiptap.dev) and then extend it.

  • mantine

    React components library with native dark theme support

    Project mention: Tailwind Is a Leaky Abstraction | news.ycombinator.com | 2022-11-29

    I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read.

    Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all.

    [0] https://mantine.dev

    [1] https://emotion.sh/docs/introduction

    [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

  • react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

    Project mention: Just launched my first app - ShopCats (shopcats.app). Getting react-navigation right was a very interesting challenge, details below. | reddit.com/r/reactnative | 2022-07-05

    What's great about is that you can design your loading screens on their site: https://skeletonreact.com/

  • lexical

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

    Project mention: Combining the Command Pattern with State Pattern in JavaScript | dev.to | 2022-11-24

    One example that immediately pops up in my mind is the lexical package by Facebook here. Lexical is an "extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance".

  • TinyMCE

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

    Project mention: I am just flabbergasted and in complete stupor (point me to an MS FrontPage alternative) | reddit.com/r/web_design | 2022-11-29

    I’ve heard good things about TinyMCE - located at https://www.tiny.cloud

  • naive-ui

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

    Project mention: What is a good UI framework to use with Vue 3 for a production application | reddit.com/r/vuejs | 2022-10-04
  • react-toastify

    React notification made easy 🚀 !

    Project mention: How do you make notifications in React? | reddit.com/r/reactjs | 2022-11-19

    https://www.npmjs.com/package/react-toastify this is one of the most satisfying DX I have ever had. Totally recommend it.

  • ag-Grid

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

    Project mention: Any ideas on how to replicate this kind of grid chart ? | reddit.com/r/datavisualization | 2022-11-27

    Ag-Grid (https://www.ag-grid.com) with custom cell renderers

  • react-icons

    svg react icons of popular icon packs

    Project mention: How to Create a Resume Builder App with Xata and Cloudinary Using NextJs | dev.to | 2022-11-23

    React Icons: To add beautiful Icons to our pages.

  • ng-zorro-antd

    Angular UI Component Library based on Ant Design

    Project mention: hello, I am making an project. can you please suggest me UI libraries for angular? | reddit.com/r/angular | 2022-07-05

    I'm currently working with Ant Design. It doesn't have a lot of advanced components, but its quite good. Community is still growing, so you won't be getting a lot of help online.

  • react-native-calendars

    React Native Calendar Components 🗓️ 📆

    Project mention: Just launched my first React Native indie productivity app - Daily: Task Planner | reddit.com/r/reactnative | 2022-10-17

    The calendar is using an abstracted version of https://github.com/wix/react-native-calendars. It’s a nice library on the surface but I had to access the low level api to really achieve what I wanted. If you do use it be careful of memory leaks, I struggled with that quite a bit.

  • react-spectrum

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

    Project mention: Are there any open-source software projects taking accessibility into account? | reddit.com/r/accessibility | 2022-07-05
  • react-map-gl

    React friendly API wrapper around MapboxGL JS

    Project mention: How to find the documentation of a specific version? | reddit.com/r/mapbox | 2022-04-21

    And it points to version 6.1 documentation at https://github.com/visgl/react-map-gl/tree/6.1-release/docs

  • 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: I built an interactive landing page for my side project | reddit.com/r/UI_Design | 2022-11-02

    FWIW, I built the site using amazing OSS libraries like cobe.vercel.app, airbnb.io/visx, framer.com/motion, radix-ui.com, tailwindcss.com, and many more – so maybe you can refer to those to build something similar!

  • Zigi

    Close all those tabs. Zigi will handle your updates.. Zigi monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack! Plus it reduces cycle time by up to 75%.

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 2022-11-30.

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 75,213
2 vuetify 35,932
3 chakra-ui 29,944
4 slate 25,956
5 react-select 25,470
6 react-native-elements 23,036
7 react-table 19,983
8 NativeBase 18,641
9 react-dnd 18,525
10 tiptap 17,143
11 mantine 15,932
12 react-content-loader 12,616
13 lexical 12,408
14 TinyMCE 12,217
15 naive-ui 10,922
16 react-toastify 10,109
17 ag-Grid 9,393
18 react-icons 8,857
19 ng-zorro-antd 8,313
20 react-native-calendars 8,172
21 react-spectrum 7,628
22 react-map-gl 6,869
23 primitives 6,756
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com