/awesome-react-design-systems

A collection of awesome React-based design systems

Creative Commons Zero v1.0 UniversalCC0-1.0

Awesome React Design Systems Awesome

"A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications."

-- Will Fanguy, A comprehensive guide to design systems

A curated list of design systems made up of reusable React components.

Contents


React Design Systems

  • Ant Design [github] - Ant Financial - A design system with values of Nature and Determinacy for better user experience of enterprise applications.
  • Atlaskit [bitbucket] - Atlassian - Atlassian's official UI library, built according to the Atlassian Design Guidelines.
  • Backpack [github] - Skyscanner - Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
  • Blueprint [github] - Palantir - A React-based UI toolkit for the web
  • Canvas [github] - Hubspot - HubSpot Canvas is the design system that we at HubSpot use to build our products.
  • Carbon Design System [github] - IBM - The Carbon Design System is integrating the new IBM Design Ethos and Language.
  • cf-ui [github] - Cloudflare - A set of packages used to build UIs at Cloudflare using projects such as React.
  • Garden [github] - Zendesk Garden - our curated collection of UI goodness.
  • Grommet [github] - Hewlett Packard - Grommet provides all the guidance, components, and design resources you need to take your ideas from concept to a real application.
  • Hack Club Design System [github] - Hack Club - A collection of React components designed for speed, consistency, and best practices.
  • Lightning Design System [github] - Salesforce - A React implementation of the Lightning Design System.
  • Material UI [github] - Google - React components that implement Google's Material Design.
  • Mineral UI [github] - CA Technologies - An open-source design system created to simplify building appealing, modern software experiences.
  • MongoDB Design [github] - MongoDB - Design for mission-critical applications.
  • Pivotal UI [github] - Pivotal - A collection of React components that are styled for the Pivotal brand.
  • Plasma [github] - WeWork - A design system for building internal business tools at WeWork.
  • Pluralsight Design System [github] - Pluralsight - The UI building blocks for creating a cohesive design across Pluralsight products.
  • Polaris [github] - Shopify - Our design system helps us work together to build a great experience for all of Shopify’s merchants.
  • Priceline One [github] - Priceline - A design system focused on speed, consistency, and best practices.
  • Ring UI [github] - JetBrains - This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains.
  • Seek Style Guide [github] - Seek - Living style guide for SEEK, powered by React, webpack, CSS Modules and Less.
  • SpareBank 1's Design System [github] - SpareBank - A common language across disciplines, to ensure consistent design in our solutions.
  • Spark Design System [github] - Quicken Loans - A system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products.
  • Swarm Design System [github] - Meetup - A set of UI components ready for use by designers and engineers to quickly ship new products and features.
  • Uniform - Hudl - The system includes components, visual guidelines, language and additional resources to help you build more cohesive product interfaces.

React Native Design Systems

  • React Native Elements [github] - React Native Training - Cross Platform React Native UI Toolkit.
  • NativeBase [github] - GeekyAnts - Essential cross-platform UI components for React Native & Vue Native.
  • Shoutem UI [github] - Shoutem - Shoutem UI toolkit enables you to build professionally looking React Native apps with ease.
  • Teaset [github] - rilyu - A UI library for react native.

Misc.