{"id":18668038,"url":"https://github.com/rririanto/react-ui-design-system","last_synced_at":"2026-03-12T14:17:11.376Z","repository":{"id":140962898,"uuid":"256505540","full_name":"rririanto/react-ui-design-system","owner":"rririanto","description":"My collection of awesome React UI libraries \u0026 Based Design Systems","archived":false,"fork":false,"pushed_at":"2020-04-24T21:04:36.000Z","size":17,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T02:53:51.973Z","etag":null,"topics":["design","design-system","reactjs","reactjs-components","ui","ui-components","ux-design"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rririanto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-17T13:07:22.000Z","updated_at":"2025-01-06T00:55:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"37083dfc-696c-43bc-9e44-e57911b4279b","html_url":"https://github.com/rririanto/react-ui-design-system","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rririanto/react-ui-design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rririanto%2Freact-ui-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rririanto%2Freact-ui-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rririanto%2Freact-ui-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rririanto%2Freact-ui-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rririanto","download_url":"https://codeload.github.com/rririanto/react-ui-design-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rririanto%2Freact-ui-design-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30428016,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T14:00:25.264Z","status":"ssl_error","status_checked_at":"2026-03-12T13:59:52.690Z","response_time":114,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["design","design-system","reactjs","reactjs-components","ui","ui-components","ux-design"],"created_at":"2024-11-07T08:41:03.771Z","updated_at":"2026-03-12T14:17:11.364Z","avatar_url":"https://github.com/rririanto.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"My favorite collection of awesome React UI libraries \u0026 Based Design Systems that I would like to use in future web development. \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\nList of Design system in this repo was inspired by [Awesome React Design Systems](https://github.com/jbranchaud/awesome-react-design-systems/) [React](https://reactjs.org/) components.\n\n#### React UI libraries \u0026 Based 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- [Base Web](https://baseweb.design/) [[github](https://github.com/uber/baseweb)] - Uber - Base Web is a foundation for initiating, evolving, and unifying web products.\n- [Blueprint](http://blueprintjs.com/) [[github](https://github.com/palantir/blueprint)] - Palantir - A React-based UI toolkit for the web\n- [Chakra UI](https://chakra-ui.com/getting-started) [[github](https://github.com/chakra-ui/chakra-ui/tree/master/packages/chakra-ui)] - Chakra UI - Create a theme object to include custom color, typography, and layout values. Chakra UI comes with a default theme, so this step is optional.\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- [Elastic UI framework](https://elastic.github.io/eui/#/) [[github](https://github.com/segmentio/evergreen)] - Elastic UI framework - The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.\n- [Evergreen](https://evergreen.segment.com/get-started/introduction) [[github](https://github.com/segmentio/evergreen)] - Evergreen - a pragmatic UI kit for building evolving products on the web. It is built and maintained open-source by Segment.\n- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/get-started) [[github](https://github.com/microsoft/fluentui)] - Microsoft - Fluent UI React is the official open-source React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. It provides robust, up-to-date, accessible components which are highly customizable using CSS-in-JS.\n- [Gestalt](https://pinterest.github.io/gestalt/) [[github](https://github.com/pinterest/gestalt)] - Gestalt - A set of React UI components that supports Pinterest’s design language.\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- [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- [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- [React-bootstrap](https://react-bootstrap.github.io/) [[github](https://github.com/react-bootstrap/react-bootstrap)] - Bootstrap - The most popular front-end framework rebuilt for React.\n- [react-desktop](http://reactdesktop.js.org/) [[github](https://github.com/gabrielbull/react-desktop)] - react-desktop - react-desktop is a JavaScript library built on top of Facebook's React library, which aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components. \n- [React SuiteJS](https://rsuitejs.com/en/) [[github](https://github.com/rsuite/rsuite)] - React Suitejs - A suite of React components, sensible UI design, and a friendly development experience.\n- [RebaseJS](https://rebassjs.org/) [[github](https://github.com/rebassjs/rebass)] - React UI components built with Styled System.\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- [Semantic-UI-React](https://react.semantic-ui.com/) [[github](https://github.com/Semantic-Org/Semantic-UI-React)] - Semantic-Ui - Semantic UI React is the official React integration for Semantic UI .\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- [Theme UI](https://theme-ui.com/) [[github](https://github.com/system-ui/theme-ui)] - Theme UI - Build consistent, themeable React apps based on constraint-based design principles.\n- [Uniform](http://uniform.hudl.com/) - Hudl - The system includes components, visual guidelines, language and additional resources to help you build more cohesive product interfaces.\n\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%2Frririanto%2Freact-ui-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frririanto%2Freact-ui-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frririanto%2Freact-ui-design-system/lists"}