TypeScript design-systems

Open-source TypeScript projects categorized as design-systems

Top 15 TypeScript design-system Projects

  • antd

    An enterprise-class UI design language and React UI library

    Project mention: Best UI library as an alternative to Fluent UI? | reddit.com/r/reactjs | 2023-03-22

    Ant Design ✨ Highly readable code, the structure is similar to FluentUI ✨ Rich components ☠️ Most Github issues appear in Chinese ☠️ There was a Christmas Easter egg issue few years ago (See https://github.com/ant-design/ant-design/issues/13098)

  • storybook

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

    Project mention: 16 React Tools to Help You Keep Your Sanity in a Crazy World | dev.to | 2023-03-19

    Website: https://storybook.js.org/

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

  • 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: Is form handling always a pain in the ass in React? | reddit.com/r/reactjs | 2023-02-26

    Remix is a dream. Once combined with Radix Form Component it'll be freaking heaven. https://github.com/radix-ui/primitives/blob/form-rfc/rfcs/2023-radix-form-primitive.md

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

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

    The adaptive interface system for modern web experiences.

    Project mention: Painless Web Components: Naming is (not too) Hard | dev.to | 2023-02-20

    fast- (Fast components from Microsoft8)

  • playroom

    Design with JSX, powered by your own component library.

    Project mention: Using NPM Programatically | dev.to | 2022-08-20

    In my day job, as part of our design system library ecosystem, we're building an internal code sandbox (think of it as a mix between Seek OSS Playroom and QuickPaste). It allows our users try the components from our component library (let's call it @wtf-ds/core) and any other supplementary React code right there in the browser, without having to create a new project in their own environment.

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  • zeit-ui-react

    A design system for building modern websites and applications.

    Project mention: is the vercel website is open-source? | reddit.com/r/nextjs | 2023-02-28

    Not what you asked for, but take a look at https://geist-ui.dev. It's a component library that has been heavily influenced by Vercel. Poking around some of the Vercel dashboard code, it looks like they even use it.

  • plasmic

    Visual page builder and web design tool for any website or web app tech stack

    Project mention: Is there a nocode ui builder which lets you use professional backend resources? | reddit.com/r/nocode | 2023-02-15

    I think Plasmic satisfies all of your requirements: https://www.plasmic.app/

  • html-figma

    Figma to HTML, CSS, React, Vue, and more!

    Project mention: PageGenie instantly generates an entire landing page from your product idea using ChatGPT and DALL-E | reddit.com/r/ChatGPT | 2023-03-08

    to test Figma integration you can try an open-source HTML ⇔ Figma plugin (GitHub) by Builder.io. Works both ways

  • design-system

    Priceline.com Design System

    Project mention: How do you guys add Styles to your React project | reddit.com/r/reactjs | 2022-07-13

    This one just has a couple variants I've done, but you can add as many as you want. My dev mentor is a Senior who works on the design system at Priceline and showed me how. You can find the docs for it here: https://priceline.github.io/design-system/

  • react-daisyui

    daisyUI components built with React 🌼

    Project mention: Is there a dedicated ui library dedicated for server component? | reddit.com/r/nextjs | 2022-11-23

    Try react daisy ui which is tailwind based.

  • noya

    The open design tools SDK. Try our new experimental wireframing tool! 👇

    Project mention: Here's a roundup of the best UX and design links from the last few weeks, hope you find it useful! How to prioritise user problems, find better alternatives to dark patterns, understand hypotheses, manage difficult stakeholders, transcribe audio and draw the rest of the owl. | reddit.com/r/UXDesign | 2023-03-13

    Noya – Write text, get design and code.

  • moon-design

    Moon Design System for React

    Project mention: Moon Design System | reddit.com/r/reactjs | 2022-08-26

    I’m thrilled to announce a huge thing. We have been developing Moon Design System for quite a while. And we are on an Open Source stage.

  • red-hat-design-system

    Red Hat's Design System

    Project mention: Why doesn't RHEL utilize the Red Hat Digital Design System? | reddit.com/r/redhat | 2022-08-24

    We're working on interoperable components under https://github.com/RedHat-UX/red-hat-design-system

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

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-03-22.

TypeScript design-systems related posts


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

Project Stars
1 antd 84,999
2 storybook 77,378
3 primitives 8,582
4 base web 8,220
5 react-spectrum 8,177
6 fast 8,084
7 playroom 4,287
8 zeit-ui-react 3,673
9 plasmic 2,395
10 html-figma 2,132
11 design-system 699
12 react-daisyui 455
13 noya 339
14 moon-design 209
15 red-hat-design-system 34
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.