TypeScript UI Components

Open-source TypeScript projects categorized as UI Components

Top 23 TypeScript UI Component Projects

  • GitHub repo storybook

    📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

    Project mention: Publish your reusable components to npm | dev.to | 2021-06-19

    import React, { FC, HTMLAttributes, ReactChild } from 'react'; import { Button, ButtonProps } from './Button/Button'; export interface Props extends HTMLAttributes { /** custom content, defaults to 'the snozzberries taste like snozzberries' */ children?: ReactChild; } // Please do not use types off of a default export module or else Storybook Docs will suffer. // see: https://github.com/storybookjs/storybook/issues/9556 /** * A custom Thing component. Neat! */ const Thing: FC = ({ children }) => { return

    {children || `the snozzberries taste like snozzberries`}
    ; }; export { Thing, Button, ButtonProps };

  • GitHub repo vuetify

    🐉 Material Component Framework for Vue

    Project mention: ⚡ Release June 15th, 2021 | reddit.com/r/vuetifyjs | 2021-06-15

    Vuetify v2.5.4 is live! It includes fixes for missing Calendar events, Avatar border radius in Cards, TypeScript component typings, and more! Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v2.5.4

  • GitHub repo react-select

    The Select Component for React.js

    Project mention: Update useState immediately | dev.to | 2021-03-25

    I'm using react-select and I need to load the component with the (multi) options selected according to the result of the request.

  • GitHub repo slate

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

    Project mention: Google Docs will move to canvas based rendering instead of DOM | news.ycombinator.com | 2021-05-12

    With a canvas-based engine, the editor is no longer relying on the contenteditable spec right?

    For the majority of use cases, do you think contenteditable + view layer which precisely updates the HTML is still viable though. Or more specifically, what do you think about libraries like ProseMirror (https://prosemirror.net/) or Slate.js (https://github.com/ianstormtaylor/slate)?

    I understand if you have really long documents or spreadsheets (I imagine latter is more frequent), you could maybe solve performance rendering problems with virtualization, which canvas gives more flexibility to?

  • GitHub repo react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: Top 7 React Native UI toolkits and component libraries in 2021 | dev.to | 2021-06-15

    More information available here: https://reactnativeelements.com

  • GitHub repo chakra-ui

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

    Project mention: Plutonium – a Next.js template styled with TailwindCSS | reddit.com/r/web_design | 2021-06-18

    quick question, why not use https://chakra-ui.com/ ? its using Tailwind

  • GitHub repo react-dnd

    Drag and Drop for React

    Project mention: JavaScript Influencers to Follow in 2021🤩 | dev.to | 2021-04-01

    Projects: facebook/react, reduxjs/redux, facebook/create-react-app, reduxjs/redux-devtools, react-dnd/react-dnd, paularmstrong/normalizr

  • GitHub repo Bit

    A lightweight and highly extendible Polyrepo for component-driven development.

    Project mention: Web OS: A windows clone with Micro frontend capabilities | dev.to | 2021-06-20

    Not every big app is needed to be breakdown as micro apps, there are other ways too, even for easier development like (Bit ecosystem)[https://bit.dev/], or just a better component model! It all depends on the requirement.

  • GitHub repo react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

    Project mention: Load API content as elements become visible to users in React | dev.to | 2021-06-08

    TL;DR; You can reduce the number of queries you make on listing pages by loading content as it gets displayed. Use react-intersection-observer to detect when an element becomes visible and react-content-loader to display a contentful placeholder loader.

  • GitHub repo ng-zorro-antd

    Angular UI Component Library based on Ant Design

    Project mention: Ultimate 2021 List of CSS Frameworks and Component Libraries for Angular, React, Vue and Svelte | dev.to | 2021-03-28

    NG Zorro

  • GitHub repo react-toastify

    React notification made easy 🚀 !

    Project mention: How to create simple and stylish notifications using react-toastify | dev.to | 2021-03-29

    If you feel like using react-toastify in your app after reading this post, I strongly recommend heading over to the demo page and playing around with the different configurations.

  • GitHub repo react-icons

    svg react icons of popular icon packs

    Project mention: Steps to Create A To-Do App With MERN stack | dev.to | 2021-06-18
  • GitHub repo lightGallery

    A customizable, modular, responsive, lightbox gallery plugin.

    Project mention: Show HN: JavaScript image viewer. Works with React, angular, & vue.js | news.ycombinator.com | 2021-05-24
  • GitHub repo react-day-picker

    Reusable date picker component for React

    Project mention: Beginner's Thread / Easy Questions (June 2021) | reddit.com/r/reactjs | 2021-06-01

    I want to render a calendar in my app and highlight certain dates on it. To achieve that I decided to use react-day-picker library.

  • GitHub repo naive-ui

    A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

    Project mention: Naïve UI - a Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses Typescript, Not Too Slow | reddit.com/r/vuejs | 2021-06-08
  • GitHub repo react-leaflet

    React components for Leaflet maps

    Project mention: Covid map - React project day 1. | dev.to | 2021-04-24
  • GitHub repo pigeon-maps

    ReactJS Maps without external dependencies

    Project mention: Pigeon Maps – ReactJS maps without external dependencies | news.ycombinator.com | 2021-03-19
  • GitHub repo react-hot-toast.com

    Smoking hot React Notifications 🔥

    Project mention: Create smoking hot toast notifications in React with React Hot Toast 🔥 | dev.to | 2021-03-22

    React Hot Toast is a library that aims to include toast notifications in your React applications easily and intuitively.

  • GitHub repo react-mosaic

    A React tiling window manager

    Project mention: Are there React Libraries for creating draggable component-based UIs? | reddit.com/r/reactjs | 2021-04-08

    this should do the trick https://github.com/nomcopter/react-mosaic

  • GitHub repo rc-slider

    React Slider

    Project mention: How to create own NPM package with css files | reddit.com/r/learnjavascript | 2021-05-08

    You provide the CSS file for the consumer to import: https://github.com/react-component/slider#usage

  • GitHub repo react-resizable-and-movable

    🖱 A resizable and draggable component for React.

    Project mention: Just made a portfolio website simulating macOS's GUI using React and tailwindcss. Link and Github repo in comments! | reddit.com/r/react | 2021-05-07

    I used package react-rnd: https://github.com/bokuweb/react-rnd

  • GitHub repo react-widgets

    Polished, feature rich, accessible form inputs built with React

  • GitHub repo notistack

    Highly customizable notification snackbars (toasts) that can be stacked on top of each other

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 2021-06-20.

Index

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

Project Stars
1 storybook 62,639
2 vuetify 31,094
3 react-select 22,749
4 slate 20,890
5 react-native-elements 20,758
6 chakra-ui 18,766
7 react-dnd 15,962
8 Bit 13,572
9 react-content-loader 11,125
10 ng-zorro-antd 7,556
11 react-toastify 6,880
12 react-icons 6,424
13 lightGallery 4,369
14 react-day-picker 4,178
15 naive-ui 3,955
16 react-leaflet 3,727
17 pigeon-maps 3,093
18 react-hot-toast.com 2,992
19 react-mosaic 2,609
20 rc-slider 2,554
21 react-resizable-and-movable 2,272
22 react-widgets 2,186
23 notistack 2,079