TypeScript UI Frameworks

Open-source TypeScript projects categorized as UI Frameworks

Top 22 TypeScript UI Framework Projects

  • antd

    An enterprise-class UI design language and React UI library

    Project mention: Best React UI frameworks to boost Productivity 🚀 🌟 | dev.to | 2023-01-30

    2. Ant Design

  • chakra-ui

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

    Project mention: Starchart: Playwright and Chakra UI Setup | dev.to | 2023-02-03

    The past week I worked on setting up Playwright, and Chakra UI with starchart. Chakra UI is needed so that their components could be used to build the web pages, and Playwright is to be used for end-to-end testing.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • react-bootstrap

    Bootstrap components built with React

    Project mention: Best React UI frameworks to boost Productivity 🚀 🌟 | dev.to | 2023-01-30

    5. React Bootstrap

  • react-admin

    A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

    Project mention: Admin web app | reddit.com/r/reactjs | 2023-01-24

    I have been looking into: - https://marmelab.com/react-admin/ and - https://refine.dev/

  • @blueprintjs/core

    A React-based UI toolkit for the web

    Project mention: Tabler: Free and open source dashboard HTML/CSS framework | news.ycombinator.com | 2022-07-29

    Maybe https://blueprintjs.com/ for you, although last time I checked it did not have explicit mobile or tablet support. (They don’t aim to break mobile or tablet but they don’t endeavour to support it.)

  • office-ui-fabric-react

    Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

    Project mention: Fluent Insights EP4: Slots | dev.to | 2022-11-29
  • antd-mobile

    Essential UI blocks for building mobile web apps.

    Project mention: Ant-Design-Mobile - Essential UI blocks for building mobile web apps. | reddit.com/r/github_trends | 2022-06-10
  • Sonar

    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.

  • base web

    A React Component library implementing the Base design language

    Project mention: Best UI libraries for React? | reddit.com/r/reactjs | 2022-11-22

    Base web https://baseweb.design/ or Material UI https://mui.com/

  • rsuite

    🧱 A suite of React components .

    Project mention: AntD vs MaterialUI? what do you prefer and why? | reddit.com/r/reactjs | 2022-08-22

    - React Suite looks very nice and clean and the documentation it's pretty straight forward. Has a ton of components built in. The support is ok and the main developer it's pretty responsive on github or on library chat. The main disadvantage is that the library focuses on desktop browsers and not on mobile browsers and uses less for customization.

  • semi-design

    🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2,300+ Design Tokens and powerful DSM tools, easy to build your own design system. Make Semi Design to Any Design

    Project mention: How We Test Semi Design React Component | dev.to | 2022-08-04

    // Semi Github Repository Directory ├── semi-animation # js animation ├── semi-animation-react # react animation ├── semi-animation-styled # style animation ├── 👉🏻 semi-foundation # foundation │ ├── button │ ├── ... ├── semi-icons # icon ├── semi-illustrations # illustrations ├── semi-theme-default # theme ├── 👉🏻 semi-ui # react adapter │ ├── button │ ├── ... ├── ... # Packaging related // https://github.com/DouyinFE/semi-design/tree/main/packages

  • reakit

    Toolkit for building accessible web apps with React

    Project mention: Adopt open-source 'accessible' UI libraries? | reddit.com/r/accessibility | 2022-08-10

    As a tech lead (or whoever makes the technical decision), it looks very tempting to adopt the open source UI libraries, if possible. In the React.js land, I used a bit of Charkra UI and Reakit.

  • searchkit

    Search UI for Elasticsearch. Compatible with Algolia's Instantsearch and Autocomplete components

    Project mention: Ask HN: Should I give up and get a job? | news.ycombinator.com | 2022-03-03

    I think you are probably spending too much of your time on software and too little time on marketing.

    When I look at an open-source project, I ask myself three things:

    1) What does it do exactly?

    2) Is this easy to get started with?

    3) Does it have any documentation?

    For example, I have a use case for wanting to use graphql to communicate with elasticsearch. I google "graphql + elasticsearch" and somewhere a link to https://www.searchkit.co/ comes up. I look at it and I find my answers within 60 seconds:

    1) Top of the page I see "Searchkit is an open source library which helps you build a great search experience with Elasticsearch. Powered by Apollo GraphQL." This makes me think that yeah, it's probably looking to solve a similar problem to me. In case I had any doubts, there's a demo.

    2) Yes, easy to get started. There's a big "get started" button at the top of the page. And a get-started-video link at the bottom of the homepage.

    3) At a glance, yes, it has decent documentation.

    Given that I quickly got answers to these 3 questions, yes, I might consider using this project, or at least trying it out.

    When I go to your page, I see:

    1) River DB is a Rust connection pool and middleware proxy... ok... why do i need that? What problem is this solving? There's a long paragraph I can read after that, but when i'm browsing the web i don't usually read long paragraphs, so you've lost me already.

    2) I have no idea how to get started

    3) Doesn't look like there's any docs

    Given the above, why would I use your software?

    Note that the above has nothing to do with your software quality. But people only care about your code if things are breaking. Marketing material is what gets them in the door. For example, I use React all the time. I have NO IDEA if the underlying code is any good. And I don't really care. What I care about is that it's easy to use.

    Anyway, long story short... if you want to build a software business, coding is maybe 30-40% of the job. Marketing, sales, documentation and all that jazz is probably the majority of the work. If you don't want to do that and you just want to code, then great, get a job. People will pay you good money for that.

  • zeit-ui-react

    A design system for building modern websites and applications.

    Project mention: Vercel Design System | reddit.com/r/nextjs | 2022-10-25
  • ChatUI

    The UI design language and React library for Conversational UI

  • orbit-components

    React components of open-source Orbit design system by Kiwi.com (by kiwicom)

  • mdbootstrap

    React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

  • @artsy/fresnel

    An SSR compatible approach to CSS media query based responsive layouts for React.

    Project mention: Responsive Rendering With SSR | reddit.com/r/reactjs | 2022-10-17

    This! If you want to limit double rendering afterwards you could look into something like fresnel to automatically unmount unused breakpoints’ components after hydration.

  • flowbite-react

    Official React components built for Flowbite and Tailwind CSS

    Project mention: How to install Remix with Flowbite and Tailwind CSS | dev.to | 2023-02-01

    Flowbite React is a free and open-source library of UI components based on the Flowbite design system that allows you to plug-and-play interactive and responsive React components such as modals, navbars, dropdowns, and more directly inside your Remix and Tailwind CSS configured project.

  • coreui-react

    CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.

  • fluent-ui

    🌈 React components that inspired by Microsoft's Fluent Design System.

  • react-stack-cards

    Visit the demo page

  • lens-ui

    React.js ui library

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

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 2023-02-03.

TypeScript UI Frameworks related posts


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

Project Stars
1 antd 84,221
2 chakra-ui 30,982
3 react-bootstrap 21,436
4 react-admin 21,433
5 @blueprintjs/core 19,588
6 office-ui-fabric-react 14,631
7 antd-mobile 10,757
8 base web 8,166
9 rsuite 7,329
10 semi-design 6,653
11 reakit 6,482
12 searchkit 4,503
13 zeit-ui-react 3,593
14 ChatUI 1,568
15 orbit-components 1,280
16 mdbootstrap 1,270
17 @artsy/fresnel 1,068
18 flowbite-react 715
19 coreui-react 527
20 fluent-ui 122
21 react-stack-cards 35
22 lens-ui 2
Build time-series-based applications quickly and at scale.
InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.