Open-source projects categorized as design-system | Edit details

Top 23 design-system Open-Source Projects

  • GitHub repo system-design-primer

    Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

    Project mention: Best Github Repos you'll ever need to crack any coding interview | reddit.com/r/learnprogramming | 2021-05-07

    https://github.com/donnemartin/system-design-primer https://github.com/Olshansk/interview https://github.com/DopplerHQ/awesome-interview-questions https://github.com/jwasham/coding-interview-university https://github.com/yangshun/tech-interview-handbook

  • GitHub repo Primer

    The CSS design system that powers GitHub

    Project mention: how to use primer css | reddit.com/r/webdevelopment | 2021-03-28
  • GitHub repo rebass

    :atom_symbol: React primitive UI components built with styled-system.

    Project mention: 15 Free ReactJS Templates for Your Next Project | dev.to | 2021-04-14

    TRebass is a primitive UI component built with styled-system. It is known to be one of the best React component libs out there. It is responsive, supports styled-components, flexbox, and more. See it's Live Demo

  • GitHub repo grommet

    a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

    Project mention: 5 Underrated React Design Systems for 2021 | dev.to | 2021-02-18


  • GitHub repo clarity

    UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

    Project mention: Best Angular UI library for a newbie that comes from vuetify | reddit.com/r/Angular2 | 2021-04-24

    Clarity Design System - http://clarity.design

  • GitHub repo 98.css

    A design system for building faithful recreations of old UIs

    Project mention: The Browser – WorldWideWeb Next Application | news.ycombinator.com | 2021-04-03

    What's this? Some sort of 98.css[0] type thing that mimics an oldskool browser's UI? Because the site is vague on what the UI elements are supposed to be for.

    [0] hhttps://jdan.github.io/98.css/

  • GitHub repo basscss

    Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

    Project mention: 18 Alternatives to Using Tailwind CSS: Do You Really Need It? | dev.to | 2021-05-08

    ✨ Tachyons 💥 Shed.css 🌟 Basscss ☄️ Expressive CSS

  • GitHub repo polaris-react

    Shopify’s product component library

    Project mention: What I wish I knew before building a Shopify App | news.ycombinator.com | 2021-03-19

    Polaris does have a CSS file - https://github.com/Shopify/polaris-react#using-the-css-compo...

    You are free to use it as you want, it doesn't support the dynamic components obviously since it's CSS. But you can easily reimplement the parts you want.

  • GitHub repo alva

    Create living prototypes with code components.

    Project mention: Self-hosted UI/UX design tool (wireframes, mockups, prototyping, ...)? | reddit.com/r/selfhosted | 2021-03-18

    Technically, it's not self-hosted by I think it's worth mentioning Alva: https://meetalva.io

  • GitHub repo theme-ui

    Build consistent, themeable React apps based on constraint-based design principles

    Project mention: Rebuilding Our Jekyll Website with Next.js and Theme UI | dev.to | 2021-04-05

    The core of Theme UI is its Theme file. It’s a document that defines all of a design system’s components and variants:

  • GitHub repo eui

    Elastic UI Framework 🙌

    Project mention: Elastic UI Styles Not Loading | reddit.com/r/reactjs | 2021-04-28

    Did you import one of css or sass? https://github.com/elastic/eui/blob/master/wiki/consuming.md#importing-compiled-css

  • GitHub repo argon-design-system

    Argon - Design System for Bootstrap 4 by Creative Tim

    Project mention: Top 20+ Bootstrap Dashboard Templates To Use Absolutely Free | dev.to | 2021-04-20

    More info Demo GitHub

  • GitHub repo vue-design-system

    An open source tool for building UI Design Systems with Vue.js

    Project mention: New and Noteworthy Vue.js Open Source Projects. Part 2 | dev.to | 2021-03-01
  • GitHub repo vue-styleguidist

    Created from react styleguidist for Vue Components with a living style guide

    Project mention: Writing Vue Storybook stories in markdown | dev.to | 2021-02-15

    Most of the frontend stack at Ecosia is built around with Vue. We also had a design style-guide built using Vue Styleguidist. Our style-guide is essentially a list of all the Vue components used across our frontend applications.

  • GitHub repo zeit-ui-react

    Modern and minimalist React UI library. (by geist-org)

    Project mention: The button component used in next.js framework | reddit.com/r/reactjs | 2020-12-25
  • GitHub repo components

    Primer React components (by primer)

  • GitHub repo atomize

    Design System for developers build on styled-components & React JS. (by proksh)

    Project mention: Atomize : Simple Design System for React | dev.to | 2021-03-15
  • GitHub repo chakra-ui-vue

    ⚡️ Build scalable and accessible Vue.js applications with ease.

    Project mention: An Overview of the Top 10 Vue UI Component Libraries in 2021 | dev.to | 2021-03-17

    Chakra UI is a simple modular and accessible component library that gives you the tools to build Vue applications quickly and easily.

  • GitHub repo braid-design-system

    Themeable design system for the SEEK Group

    Project mention: Idea/Proof of Concept: Write UI like in Flutter or SwiftUI | reddit.com/r/sveltejs | 2021-02-08

    Cool stuff! I’m doing something similar. My main inspiration was elm-ui and braid design system. With great keynote from its creator: from Reactive conf Get also inspired and good luck!

  • GitHub repo orbit-components

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

  • GitHub repo Design-Resources

    A curated list of design resources from design templates, stock photos, icons, colors, and much more.

    Project mention: A curated list of design resources for developers including design templates, stock photos, icons, colors, and much more | reddit.com/r/u_Akatrus | 2021-04-14
  • GitHub repo carbon-components-svelte

    Svelte implementation of the Carbon Design System

    Project mention: Carbon Components with SvelteKit? | reddit.com/r/sveltejs | 2021-04-19

    Perhaps this might help? https://github.com/IBM/carbon-components-svelte/issues/598

  • GitHub repo react-native-magnus

    A Utility-First React Native UI Framework 🚀🧩

    Project mention: How to use ChakraUI on native mobile? | dev.to | 2021-04-01

    Magnus UI

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-05-08.


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

Project Stars
1 system-design-primer 129,074
2 Primer 10,204
3 rebass 7,277
4 grommet 7,215
5 clarity 6,217
6 98.css 5,869
7 basscss 5,612
8 polaris-react 4,017
9 alva 3,671
10 theme-ui 3,666
11 eui 2,737
12 argon-design-system 2,188
13 vue-design-system 1,997
14 vue-styleguidist 1,979
15 zeit-ui-react 1,704
16 components 1,176
17 atomize 1,126
18 chakra-ui-vue 1,094
19 braid-design-system 936
20 orbit-components 795
21 Design-Resources 791
22 carbon-components-svelte 789
23 react-native-magnus 685