{"id":13787521,"url":"https://github.com/jbranchaud/awesome-react-design-systems","last_synced_at":"2025-04-13T05:03:57.554Z","repository":{"id":36021974,"uuid":"132911101","full_name":"jbranchaud/awesome-react-design-systems","owner":"jbranchaud","description":"A collection of awesome React-based design systems","archived":false,"fork":false,"pushed_at":"2022-11-05T16:55:04.000Z","size":18,"stargazers_count":889,"open_issues_count":8,"forks_count":46,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-10T09:08:53.783Z","etag":null,"topics":["awesome-list","design","design-systems","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbranchaud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-10T14:22:48.000Z","updated_at":"2025-04-04T13:25:32.000Z","dependencies_parsed_at":"2022-08-08T12:46:31.496Z","dependency_job_id":null,"html_url":"https://github.com/jbranchaud/awesome-react-design-systems","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbranchaud%2Fawesome-react-design-systems","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbranchaud%2Fawesome-react-design-systems/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbranchaud%2Fawesome-react-design-systems/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbranchaud%2Fawesome-react-design-systems/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbranchaud","download_url":"https://codeload.github.com/jbranchaud/awesome-react-design-systems/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665747,"owners_count":21142123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome-list","design","design-systems","react","react-native"],"created_at":"2024-08-03T20:00:37.179Z","updated_at":"2025-04-13T05:03:57.527Z","avatar_url":"https://github.com/jbranchaud.png","language":null,"funding_links":[],"categories":["React \u003ca name=\"react\"\u003e\u003c/a\u003e","Others","Other Lists","Collections"],"sub_categories":["TeX Lists","UI components"],"readme":"# Awesome React Design Systems [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)\n\n\u003e \"A design system is a collection of reusable components, guided by clear\n\u003e standards, that can be assembled together to build any number of\n\u003e applications.\"\n\n-- Will Fanguy, [_A comprehensive guide to design\nsystems_](https://www.invisionapp.com/inside-design/guide-to-design-systems/)\n\nA curated list of design systems made up of reusable\n[React](https://reactjs.org/) components.\n\n#### Contents\n\n- [React Design Systems](#react-design-systems)\n- [React Native Design Systems](#react-native-design-systems)\n- [Misc.](#misc)\n\n\u003chr /\u003e\n\n#### React Design Systems\n\n- [Ant Design](https://ant.design/) [[github](https://github.com/ant-design/ant-design/)] - Ant Financial - A design system with values of Nature and Determinacy for better user experience of enterprise applications.\n- [Atlaskit](http://atlaskit.atlassian.com/) [[bitbucket](https://bitbucket.org/atlassian/atlaskit-mk-2)] - Atlassian - Atlassian's official UI library, built according to the Atlassian Design Guidelines.\n- [Backpack](https://backpack.github.io/) [[github](https://github.com/Skyscanner/backpack)] - Skyscanner - Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.\n- [Blueprint](http://blueprintjs.com/) [[github](https://github.com/palantir/blueprint)] - Palantir - A React-based UI toolkit for the web\n- [Canvas](https://canvas.hubspot.com/) [[github](https://github.com/HubSpot/canvas)] - Hubspot - HubSpot Canvas is the design system that we at HubSpot use to build our products.\n- [Carbon Design System](http://carbondesignsystem.com/) [[github](https://github.com/carbon-design-system/carbon-components)] - IBM - The Carbon Design System is integrating the new IBM Design Ethos and Language.\n- [cf-ui](https://cloudflare.github.io/cf-ui/) [[github](https://github.com/cloudflare/cf-ui)] - Cloudflare - A set of packages used to build UIs at Cloudflare using projects such as React.\n- [Garden](https://garden.zendesk.com/react-components/) [[github](https://github.com/zendeskgarden/react-components)] - Zendesk Garden - our curated collection of UI goodness.\n- [Grommet](http://grommet.io/) [[github](https://github.com/grommet/grommet)] - Hewlett Packard - Grommet provides all the guidance, components, and design resources you need to take your ideas from concept to a real application.\n- [Hack Club Design System](https://design.hackclub.com) [[github](https://github.com/hackclub/design-system)] - Hack Club - A collection of React components designed for speed, consistency, and best practices.\n- [Lightning Design System](https://react.lightningdesignsystem.com/) [[github](https://github.com/salesforce/design-system-react)] - Salesforce - A React implementation of the Lightning Design System.\n- [Material UI](https://www.material-ui.com/#/) [[github](https://github.com/mui-org/material-ui)] - Google - React components that implement Google's Material Design.\n- [Mineral UI](https://mineral-ui.com/) [[github](https://github.com/mineral-ui/mineral-ui)] - CA Technologies - An open-source design system created to simplify building appealing, modern software experiences.\n- [MongoDB Design](http://mongodb.design/#/) [[github](https://github.com/mongodb/design)] - MongoDB - Design for mission-critical applications.\n- [Pivotal UI](https://styleguide.pivotal.io/) [[github](https://github.com/pivotal-cf/pivotal-ui)] - Pivotal - A collection of React components that are styled for the Pivotal brand.\n- [Plasma](http://plasma.guide/) [[github](https://github.com/wework/plasma)] - WeWork - A design system for building internal business tools at WeWork.\n- [Pluralsight Design System](https://design-system.pluralsight.com/) [[github](https://github.com/pluralsight/design-system)] - Pluralsight - The UI building blocks for creating a cohesive design across Pluralsight products.\n- [Polaris](https://polaris.shopify.com/) [[github](https://github.com/Shopify/polaris)] - Shopify - Our design system helps us work together to build a great experience for all of Shopify’s merchants.\n- [Priceline One](https://pricelinelabs.github.io/design-system/) [[github](https://github.com/pricelinelabs/design-system)] - Priceline - A design system focused on speed, consistency, and best practices.\n- [Ring UI](http://www.jetbrains.org/ring-ui/index.html) [[github](https://github.com/JetBrains/ring-ui)] - JetBrains - This collection of UI components aims to provide all of the necessary building\nblocks for web-based products built inside JetBrains.\n- [Seek Style Guide](https://seek-oss.github.io/seek-style-guide/) [[github](https://github.com/seek-oss/seek-style-guide)] - Seek - Living style guide for SEEK, powered by React, webpack, CSS Modules and Less.\n- [SpareBank 1's Design System](https://design.sparebank1.no/) [[github](https://github.com/SpareBank1/designsystem)] - SpareBank - A common language across disciplines, to ensure consistent design in our solutions.\n- [Spark Design System](https://sparkdesignsystem.com/) [[github](https://github.com/sparkdesignsystem/spark-design-system)] - Quicken Loans - A system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products.\n- [Swarm Design System](https://meetup.github.io/swarm-design-system/) [[github](https://github.com/meetup/swarm-design-system)] - Meetup - A set of UI components ready for use by designers and engineers to quickly ship new products and features.\n- [Uniform](http://uniform.hudl.com/) - Hudl - The system includes\n  components, visual guidelines, language and additional resources to help\n  you build more cohesive product interfaces.\n\n#### React Native Design Systems\n\n- [React Native Elements](https://react-native-training.github.io/react-native-elements/) [[github](https://github.com/react-native-training/react-native-elements)] - React Native Training - Cross Platform React Native UI Toolkit.\n- [NativeBase](https://nativebase.io/) [[github](https://github.com/GeekyAnts/NativeBase)] - GeekyAnts - Essential cross-platform UI components for React Native \u0026 Vue Native.\n- [Shoutem UI](https://shoutem.github.io/docs/ui-toolkit/introduction) [[github](https://github.com/shoutem/ui)] - Shoutem - Shoutem UI toolkit enables you to build professionally looking React Native apps with ease.\n- Teaset [[github](https://github.com/rilyu/teaset)] - rilyu - A UI library\n  for react native.\n\n#### Misc.\n\n- [React Material Design Icons](https://jxnblk.com/rmdi/) [[github](https://github.com/jxnblk/rmdi)] - Brent Jackson - Built with Pixo, Styled Components, and Styled System.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbranchaud%2Fawesome-react-design-systems","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbranchaud%2Fawesome-react-design-systems","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbranchaud%2Fawesome-react-design-systems/lists"}