JavaScript design-system

Open-source JavaScript projects categorized as design-system

Top 22 JavaScript design-system Projects

  • grommet

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

  • rebass

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

    Project mention: Comparing React Component Libraries | | 2022-09-16

    If you are a fan of Styled System, you are sure to love this library, as it was built on top of Styled System. I consider Rebass to be the most unopinionated library on the list, as unlike Material Ui, Semantic UI, and Bootstrap, its components do not come with a default theme, giving you the freedom to add your preferred theme to your application. Its styles are also much easier to override. Rebass is minimalist and was designed with style extension in mind.

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

  • carbon

    A design system built by IBM (by carbon-design-system)

    Project mention: I’d like to contribute to OSS | | 2022-12-16

    Not a maintainer on this project but seems to be taking pulls.

  • flowbite

    The most popular and open-source library of Tailwind CSS components

    Project mention: Flowbite or Flowbite-Svelte? | | 2023-03-26

    Flowbite = over 450+ UI components, sections, and pages.

  • gestalt

    A set of React UI components that supports Pinterest’s design language

    Project mention: Gestalt – Pinterest’s Design System | | 2022-08-29
  • vue-design-system

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

  • chakra-ui-vue

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

    Project mention: Looking for advice on UI framework instead of Vuetify | | 2022-09-30

    Honorable mention to CharkraUI Vue.

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

  • shards-dashboard-react

    ⚛️A free and beautiful React admin dashboard template pack.

  • atomize

    Design System for developers build on styled-components & React JS.

    Project mention: Top 20 Best React Website Templates for React Developers [Free and Premium] | | 2022-08-23

    Atomize React

  • shards-react

    ⚛️A beautiful and modern React design system.

    Project mention: Ca programator, ce ai vrea de la un designer? | | 2022-08-09

    Ca sa fiu mai specific, chestii de genul:

  • pivotal-ui-react

    Pivotal's design system & component library

  • uiengine

    Workbench for UI-driven development

  • web-components

    A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

    Project mention: This Instagram post... I guess backend code does't belong to git | | 2023-02-26

    Vaadin does the same for Java.

  • expo-disneyplus

    Disney+ UI Clone with React Native & Expo

  • design-system

    Hack Club's (old) design system (by hackclub)

  • ui

    Talend's unified web UI repository. (by Talend)

    Project mention: AG Grid Community Update June 2022 | | 2022-07-06

    Talend UI Components have some Storybook examples covering their extensions for AG Grid

  • a11y-color-tokens

    Generate accessible UI colors from your base color tokens.

  • ui-kit

    Component library 💅

  • farbvelo

    "Random" color palette generator, cycles

    Project mention: What colors are these? | | 2023-01-09

    Drag the image into it will tell you

  • uinix-ui

    A minimal framework-agnostic and configurable UI system to build UI systems. Your system your rules 🤘.

  • blox

    Component library framework for creating UI building blocks

    Project mention: Was looking for something different than storybook, ended up creating this open source project. | | 2022-12-08
  • sx-design

    :art: Inclusive design system written using @adeira/sx. This repository is automatically exported from via Shipit

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

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

JavaScript design-system related posts


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

Project Stars
1 grommet 8,162
2 rebass 7,880
3 carbon 6,427
4 flowbite 4,156
5 gestalt 4,097
6 vue-design-system 2,123
7 chakra-ui-vue 1,709
8 shards-dashboard-react 1,594
9 atomize 1,580
10 shards-react 746
11 pivotal-ui-react 640
12 uiengine 356
13 web-components 309
14 expo-disneyplus 272
15 design-system 154
16 ui 148
17 a11y-color-tokens 147
18 ui-kit 139
19 farbvelo 58
20 uinix-ui 18
21 blox 5
22 sx-design 4
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.