Skip to content

Instantly share code, notes, and snippets.

@0xdevalias

0xdevalias/design-systems.md

Last active November 22, 2023 00:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 0xdevalias/a1d35e8bd48560dfdc863055cac98236 to your computer and use it in GitHub Desktop.
Save 0xdevalias/a1d35e8bd48560dfdc863055cac98236 to your computer and use it in GitHub Desktop.
Download ZIP
Some notes and references on Design Systems
Raw
design-systems.md

Design Systems

Some notes and references on Design Systems.

Table of Contents

Design Systems and Component Libraries

GitHub Primer Design System

Google Material Design

  • https://m3.material.io/

    • Material Design (v3)

    • Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.

  • https://m2.material.io/design

    • Material Design (v2)

  • https://github.com/material-components

    • Build beautiful, usable products with Material Components for Android, Flutter, iOS, and the web.

    • https://github.com/material-components/material-components

      • Material Components: Shared Documentation and Policies

      • Material Components for Android, iOS, web and Flutter help developers execute Material Design with modular and customizable UI components. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional user experiences. This repo contains all common documentation for Material Components projects across the different platforms.

  • https://github.com/material-components/material-web

    • Material Design Web Components

    • https://material-web.dev/

      • Material Web The official web component set for Material 3

      • Material web, also known as Material Web Components or MWC, is a library of web components that follows Google's Material Design guidelines.

  • https://github.com/material-components/material-components-web

    • Modular and customizable Material Design UI components for the web

    • Material Components for the web

    • Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

      Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

      Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.

    • https://m3.material.io/develop/web

      • Material Web is Google’s component library for building applications that work in any web framework.

  • https://github.com/material-components/material-components-web-react

    • Material Components for React (MDC React)

    • NOTE: MDC-React is no longer under active development

      We created MDC-React in 2018 to implement the updated Material Design guidelines. Since then, the open-source React community has embraced the new guidelines and created a number of excellent unofficial implementations. See Material Design Components - Web Framework Wrappers for a partial list.

      In order to increase our focus on implementing our core, framework-independent libraries (MDC-Web and MWC), we’re passing the Material+React baton back to the community. That means Material Design will no longer be updating and maintaining this repo. We recommend that you switch to another implementation and keep building beautiful, usable apps based on Material Design. Thanks for being part of the project!

    • https://github.com/material-components/material-components-web/blob/master/docs/framework-wrappers.md

      • MDC Web on other frameworks Material Components for the web are architected to be adaptable to various major web frameworks. The following wrapper libraries are available:

  • https://github.com/mui

    • Move faster with intuitive React UI tools. Follow your own design system, or start with Material Design (Material UI).

    • https://github.com/mui/material-ui

      • MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

      • MUI Core contains foundational React UI component libraries for shipping new features faster:

        • Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.

        • Joy UI is a library of beautifully designed React UI components built to spark joy.

        • Base UI is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.

        • MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.

      • https://mui.com/core/

        • Ready to use components free forever Get a growing list of React components and utilities, ready-to-use, free forever, and with accessibility always in mind. We've built the foundational UI blocks for your design system so you don't have to.

      • https://mui.com/material-ui/

        • Ready to use Material Design components Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system.

      • https://mui.com/joy-ui/getting-started/

        • Joy UI - Overview Joy UI is a library of beautifully designed React UI components built to spark joy in the development process.

      • https://mui.com/base-ui/

        • A blank canvas for total flexibility Base UI gives you a set of foundational "headless" components that you can build with using any styling solution you choose—no need to override any default style engine or theme.

      • https://mui.com/system/getting-started/

        • MUI System - Overview MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries.

  • https://github.com/google/material-design-icons

    • Material Icons / Material Symbols

    • These are two different official icon sets from Google, using the same underlying designs. Material Icons is the classic set, while Material Symbols was introduced in April 2022, built on variable font technology.

    • The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

    • https://developers.google.com/fonts/docs/material_icons
  • https://github.com/google/material-design-lite

    • Material Design Components in HTML/CSS/JS

    • An implementation of Material Design components in vanilla CSS, JS, and HTML.

    • Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

    • Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.

Microsoft Fluent Design System

  • https://en.wikipedia.org/wiki/Fluent_Design_System
  • https://fluent2.microsoft.design/

    • Fluent 2

    • Create beautiful, cohesive Microsoft experiences using the Fluent 2 UI kits. Built in Figma, the Fluent 2 UI kits contain design assets that map to the code libraries. That means seamless handoff from design to development, every time.

    • Fluent 2 provides a seamless maker experience from design to development to delivery.

  • https://fluent1.microsoft.design/

    • Fluent 1

    • Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

  • https://github.com/microsoft/fluentui

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

    • https://react.fluentui.dev/

      • Fluent UI React Components

  • https://inclusive.microsoft.design/

    • Microsoft Inclusive Design Inclusive Design is a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.

Radix UI

Tailwind

  • https://github.com/tailwindlabs
  • https://github.com/aniftyco/awesome-tailwindcss

    • Awesome Tailwind CSS

    • Awesome things related to Tailwind CSS

  • https://tailwindui.com/

    • Tailwind UI Build your next idea even faster. Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.

    • https://tailwindui.com/components

      • Beautiful UI components, crafted with Tailwind CSS.

      • Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.

    • https://tailwindui.com/templates

      • Modern website templates, crafted with Tailwind CSS.

      • Visually-stunning, easy to customize site templates built with React and Next.js. The perfect starting point for your next project and the ultimate resource for learning how experts build real websites with Tailwind CSS.

TanStack

  • https://tanstack.com/

    • High-quality open-source software for web developers. Headless, type-safe, & powerful utilities for State Management, Routing, Data Visualization, Charts, Tables, and more.

    • Open Source Libraries

      • TanStack Query

        • Powerful asynchronous state management, server-state utilities and data fetching Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid & Svelte applications all without touching any "global state".

        • https://tanstack.com/query/
        • https://tanstack.com/query/

          • Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

      • TanStack Table

        • Headless UI for building powerful tables & datagrids Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid & Svelte while retaining 100% control over markup and styles.

        • https://tanstack.com/table/
        • https://github.com/tanstack/table

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

      • TanStack Router

        • Type-safe Routing for React applications. Powerful routing for your React applications including a fully type-safe API and first-class search-param for managing state in the URL.

        • https://tanstack.com/router/
        • https://github.com/tanstack/router

          • Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.

      • TanStack Virtual

        • Headless UI for Virtualizing Large Element Lists Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid & Svelte while retaining 100% control over markup and styles.

        • https://tanstack.com/virtual/
        • https://github.com/TanStack/virtual

          • Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

      • TanStack Form

        • Headless UI for building performant and type-safe forms Headless, performant, and type-safe form state management for TS/JS, React, Solid, Svelte and Vue

        • https://tanstack.com/form/
        • https://github.com/tanstack/form

        • Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Svelte Form and Vue Form.

      • React Charts

      • React Ranger

        • Headless range and multi-range slider utilities. React ranger supplies the primitive range and multi-range slider logic as a headless API that can be attached to any styles or markup for that perfect design.

        • https://github.com/TanStack/ranger

          • Headless utilities for building range and multi-range sliders in React, Preact, Solid, Vue, Svelte and Angular

      • TanStack Loaders

        • Simple data loading and caching utilities for apps Simple and lightweight cached data loading designed for fetch-as-you-render patterns in React, Vue, Solid & Svelte. It's basically React Query lite!

      • TanStack Actions

        • Simple mutation management utilities for apps Simple and lightweight action/mutation management utility for frameworks like React, Vue, Solid & Svelte.

      • TanStack Store

        • Framework agnostic data store with reactive framework adapters The core data store that powers TanStack libraries and their framework adapters. Use it if you dare.

        • https://tanstack.com/store/

          • Framework agnostic, type-safe store w/ reactive framework adapters

  • https://github.com/TanStack

    • Open source software for building better UI and UX

Other Design Systems

  • https://bugcrowd.design/

    • Bugcrowd Design System

    • bugcrowd.design holds all the basics you’ll need to design inclusively with us. It’s built to make designing & developing at Bugcrowd easier.

    • The Bugcrowd design system is currently an in-house project. We would like to open source the Sass and JavaScript at some stage. While many of our components and patterns are bespoke, our documentation includes best practice ux and accessibility guidance you may find useful when solving similar design problems.

Unsorted

  • https://www.webcomponents.org/
  • https://github.com/ionic-team/stencil

    • Stencil A compiler for generating Web Components using technologies like TypeScript and JSX, built by the Ionic team.

    • A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

    • https://stenciljs.com/

      • Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.

        • Simple: With intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus.
        • Performant: A tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around.
        • Future proof: Build cross-framework component libraries on open web standards, and break free of Framework Churn.
        • Framework-agnostic: Stencil components are just Web Components, so they will work with any major framework—or no framework at all.
  • https://github.com/lit/lit

    • Lit is a simple library for building fast, lightweight web components.

    • At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

    • https://lit.dev/
  • https://github.com/ProjectEvergreen/wcc

    • Web Components Compiler (WCC)

    • Experimental native Web Components compiler.

    • WCC is not a static site generator, framework or bundler. It is focused on producing raw HTML from Web Components with the intent of being easily integrated into a site generator or framework

  • https://open-ui.org/

    • The purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers.

      To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility requirements, and provide test suites to ensure compatibility. We’ll also implement polyfills for our extensible web UI controls.

      Today, component frameworks and design systems reinvent common web UI controls to give designers full control over their appearance and behavior. We hope to make it unnecessary to reinvent built-in UI controls, but for those who choose to do so, we expect that these design systems will benefit from Open UI’s specifications and test suites.

      Long term, we hope that Open UI will establish a standard process for developing high-quality UI controls suitable for addition to the web platform.

    • https://github.com/openui/open-ui

      • Open UI

      • Maintain an open standard for UI and promote its adherence and adoption.

See Also

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment