{"id":14109163,"url":"https://github.com/component-driven/awesome-list","last_synced_at":"2025-05-09T00:32:22.870Z","repository":{"id":56528352,"uuid":"133853762","full_name":"component-driven/awesome-list","owner":"component-driven","description":"Curated list of links on component-driven development and design systems","archived":false,"fork":false,"pushed_at":"2020-11-02T11:53:23.000Z","size":48,"stargazers_count":334,"open_issues_count":0,"forks_count":26,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-27T08:02:06.138Z","etag":null,"topics":["awesome","awesome-list","component-driven","components","design-systems","react","reactjs"],"latest_commit_sha":null,"homepage":"","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/component-driven.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":"Contributing.md","funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-17T18:34:43.000Z","updated_at":"2025-04-01T21:55:11.000Z","dependencies_parsed_at":"2022-08-15T20:20:52.767Z","dependency_job_id":null,"html_url":"https://github.com/component-driven/awesome-list","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/component-driven%2Fawesome-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component-driven%2Fawesome-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component-driven%2Fawesome-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component-driven%2Fawesome-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/component-driven","download_url":"https://codeload.github.com/component-driven/awesome-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253171123,"owners_count":21865275,"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","awesome-list","component-driven","components","design-systems","react","reactjs"],"created_at":"2024-08-14T10:02:07.310Z","updated_at":"2025-05-09T00:32:22.634Z","avatar_url":"https://github.com/component-driven.png","language":null,"readme":"# Awesome component-driven development [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)\n\nA curated list of links on component-driven development and design systems\n\n\u003c!-- To update TOC run: npx markdown-toc -i Readme.md --\u003e\n\u003c!-- To lint run:       npx awesome-lint --\u003e\n\u003c!-- To format run:     npx prettier --write Readme.md --\u003e\n\n## Contents\n\n\u003c!-- toc --\u003e\n\n- [Articles](#articles)\n  - [Components](#components)\n    - [React](#react)\n  - [Development tools](#development-tools)\n  - [Styles](#styles)\n  - [Testing](#testing)\n  - [Design systems](#design-systems)\n  - [Design](#design)\n  - [Whitespace](#whitespace)\n  - [Color](#color)\n  - [Typography](#typography)\n  - [Design tools](#design-tools)\n  - [Misc](#misc)\n- [Talks](#talks)\n- [Books](#books)\n- [Courses](#courses)\n- [Tools](#tools)\n  - [Development workbenches](#development-workbenches)\n  - [Misc](#misc-1)\n- [Libraries and components](#libraries-and-components)\n  - [React](#react-1)\n  - [Styles](#styles-1)\n- [Design system examples](#design-system-examples)\n  - [Design system catalogs](#design-system-catalogs)\n- [Misc](#misc-2)\n- [Contributing](#contributing)\n- [Authors and license](#authors-and-license)\n\n\u003c!-- tocstop --\u003e\n\n## Articles\n\n### Components\n\n- [Cards and Composability in Design Systems](https://medium.com/eightshapes-llc/cards-and-composability-in-design-systems-8845ecbee50e)\n- [Component Based Design System With Styled-System](https://varun.ca/styled-system/)\n- [Defining Component APIs in React](https://jxnblk.com/blog/defining-component-apis-in-react/)\n- [Designing Button States](https://cloudfour.com/thinks/designing-button-states/)\n- [Handling spacing in a UI component library](https://medium.com/fed-or-dead/handling-spacing-in-a-ui-component-library-70f3b22ec89)\n- [Hidden in plain site — the levels of component reuse. The path to portability for UI components](https://blog.hichroma.com/hidden-in-plain-site-the-levels-of-component-reuse-ee9b0d7b1bd2)\n- [Managing Heading Levels In Design Systems](https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3)\n\n#### React\n\n- [Patterns for Style Composition in React](https://jxnblk.com/blog/patterns-for-style-composition-in-react/)\n- [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)\n- [The Three Tenets of Styled System](https://jxnblk.com/blog/the-three-tenets-of-styled-system/)\n\n### Development tools\n\n- [Component-Driven Development](https://blog.hichroma.com/component-driven-development-ce1109d56c8e#.ltre4c82b)\n- [Prefabricated components. The case for building UI components in isolation](https://blog.hichroma.com/prefabricated-components-2932bfc992ba)\n- [React Storybook: Develop Beautiful User Interfaces with Ease](https://www.sitepoint.com/react-storybook-develop-beautiful-user-interfaces-with-ease/)\n- [Storybook vs Styleguidist. A comparison of the top UI component explorers](https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06)\n- [UI component explorers — your new favorite tool](https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a#.ag31xppof)\n- [Using React within a Design System](https://medium.com/buildit/using-react-within-a-design-system-73d4bb0cc822#.nix8am1gt)\n\n### Styles\n\n- [Creating truly universal React component systems. Announcing styled-components/primitives](https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7)\n- [Designer-Oriented Styles](https://the-pastry-box-project.net/james-kyle/2018-january-22)\n- [Styling themes](https://johno.com/styling-themes)\n- [React SSR pitfalls in building adaptive layouts](https://nikitakirsanov.com/en/blog/adaptive-layout-in-react-apps-with-ssr/)\n\n### Testing\n\n- [Visual Testing — the pragmatic way to test UIs](https://blog.hichroma.com/visual-testing-the-pragmatic-way-to-test-uis-18c8da617ecf)\n\n### Design systems\n\n- [4 Things I Know About Pattern Libraries](http://daverupert.com/2017/06/what-i-know-about-pattern-libraries/)\n- [Building a React Component Library](https://medium.com/@_alanbsmith/building-a-react-component-library-part-1-d8a1e248fe6c)\n- [Conducting an Interface Inventory](http://bradfrost.com/blog/post/conducting-an-interface-inventory/)\n- [Creating A Living Style Guide: A Case Study](https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/)\n- [Design Systems Sprint 0: The Silver Bullet of Product Development](https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d)\n- [Design systems, style guides, pattern libraries. What the hell is the difference?](https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc)\n- [Designing Imaginative Style Guides](https://24ways.org/2016/designing-imaginative-style-guides/)\n- [From Pages to Patterns: An Exercise for Everyone](http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone)\n- [How and why we built the Marvel Styleguide](https://blog.marvelapp.com/the-marvel-styleguide/)\n- [How to construct a design system. Tips for designing and building a consistent design system](https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117)\n- [Interface Inventory](http://bradfrost.com/blog/post/interface-inventory/)\n- [Setup a design system. Build a system that provides a unified set of UX, design rules and patterns](https://blog.prototypr.io/design-system-ac88c6740f53#.7teofr9rk)\n- [Taking The Pattern Library To The Next Level](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/)\n- [Tokens in Design Systems: 10 Tips to Architect \u0026 Implement Design Decisions for Everyone](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421)\n- [UI Component Playbook. A 5-step guide to designing and engineering frontends with components](https://blog.hichroma.com/ui-component-playbook-fd3022d00590#.7yfxvqlqw)\n\n### Design\n\n- [Dark Patterns are designed to trick you (and they’re all over the Web)](https://arstechnica.com/information-technology/2016/07/dark-patterns-are-designed-to-trick-you-and-theyre-all-over-the-web/)\n- [Design System Grammar](https://daneden.me/2017/07/12/a-design-system-grammar/)\n\n### Whitespace\n\n- [8-Point Grid: Borders And Layouts](https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091)\n- [Framework for creating a predictable \u0026 harmonious spacing system for faster design-dev handoff](https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c)\n- [Intro to The 8-Point Grid System](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)\n- [More Padding, Please! The power of white space in product design](https://medium.com/wayfair-design/more-padding-please-b95e19422acc)\n- [Role of White Space in User Interface Design](http://www.designorate.com/white-space-user-interface-design/)\n- [Space in Design Systems. From Basics to Expanded Concepts to Apply Space with Intent](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)\n- [Whitespace](http://alistapart.com/article/whitespace)\n- [Why White Space Is Crucial To UX Design](https://www.fastcodesign.com/3046656/why-white-space-is-crucial-to-ux-design)\n\n### Color\n\n- [10 Reasons to Use Color](http://understandinggraphics.com/design/10-reasons-to-use-color/)\n- [Polishing GitLab’s UI: A new color system](https://about.gitlab.com/2018/03/29/polishing-gitlabs-ui-a-new-color-system/)\n- [Re-approaching Color](https://design.lyft.com/re-approaching-color-9e604ba22c88)\n- [The Science of Color Contrast — An Expert Designer’s Guide](https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156)\n- [Designing accessible color systems](https://stripe.com/en-de/blog/accessible-color-systems)\n\n### Typography\n\n- [Creating a type style guide](https://blog.typekit.com/2014/10/22/creating-a-type-style-guide/)\n- [Deep Dive on Typescales](https://medium.com/design-ibm/a-deep-dive-on-typescales-16c7b1473d83)\n- [Framework to create an accessible \u0026 harmonious typography system for faster design-dev handoff](https://blog.prototypr.io/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd)\n- [Typographic scale](http://spencermortensen.com/articles/typographic-scale/)\n- [Typography in Design Systems](https://medium.com/@ethersystem/typography-in-design-systems-d61bf5d8a333)\n\n### Design tools\n\n- [Component architecture in Figma](https://blog.figma.com/component-architecture-in-figma-f16ae9cc4481)\n- [Creating and Maintaining the Marvel Style Guide in Sketch](https://blog.marvelapp.com/creating-maintaining-marvel-style-guide-sketch/)\n- [Evolution of Tools. Closing the loop with Design Intelligence](https://airbnb.design/the-evolution-of-tools/)\n- [How to create a Design System in Sketch](https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-one-fd450dccab10)\n- [Painting with Code. Introducing our new open source library React Sketch.app](https://airbnb.design/painting-with-code/)\n- [Sketching in the Browser](https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526)\n\n### Misc\n\n- [Pure UI](https://rauchg.com/2015/pure-ui)\n- [Sketching Interfaces. Generating code from low fidelity wireframes](https://airbnb.design/sketching-interfaces/)\n- [Turning Design Mockups Into Code With Deep Learning](https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/)\n- [Vue Design System](https://viljamis.com/2018/vue-design-system/)\n- [Why designers and frond-end developers should talk more often](http://janpersiel.com/why-designers-and-frond-end-developers-should-talk-more-often/)\n\n## Talks\n\n- [Build Beautiful Interfaces Faster](https://youtu.be/dlMe7u02m50) by Dominic Nguyen and Zhenya Savchenko (2016)\n- [Custom CSS is the path to inconsistent UI](https://youtu.be/Cdtwz3PbW7M) by Artem Sapegin (React Alicante 2017)\n- [Designing With React](https://youtu.be/ixIuMs3aDCI) by Kristin Baumann (React Day Berlin 2017)\n- [Dream of Styleguide Driven Development](https://youtu.be/JjXnmhNW8Cs) by Sara Vieira (React Alicante 2017)\n- [Modular CSS](https://youtu.be/dYD058pQ8vg) by Andrey Okonetchnikov (React Alicante 2017)\n- [Nathan Curtis on Buttons in Design Systems](https://vimeo.com/223433031)\n- [Sketching in the Browser](https://youtu.be/ohw6AgPbJoE) by Mark Dalgleish (JSHeroes 2018)\n\n## Books\n\n- [Atomic Design](https://shop.bradfrost.com/) by Brad Frost\n- [Design Systems: A practical guide to creating design languages for digital products](https://www.smashingmagazine.com/printed-books/design-systems/) by Alla Kholmatova\n- [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) by InVision\n- [Elements of Typographic Style](https://www.amazon.com/gp/product/0881792128/?tag=artesapesphot-20) by Robert Bringhurst\n- [Front-end Style Guides: Creating and Maintaining Style Guides for Websites](http://www.maban.co.uk/projects/front-end-style-guides/) by Anna Debenham\n- [Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites](https://www.amazon.com/gp/product/B01B6WS868/?tag=artesapesphot-20) by Micah Godbolt\n- [Inclusive Components](http://book.inclusive-components.design/) by Heydon Pickering\n- [On Web Typography](https://abookapart.com/products/on-web-typography) by Jason Santa Maria\n\n## Courses\n\n- [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns)\n\n## Tools\n\n### Development workbenches\n\n- [Bit](https://github.com/teambit/bit) - A tool for isolating, developing and sharing components between projects and applications, with 2-way collaboartion over components.\n- [React Cosmos](https://github.com/react-cosmos/react-cosmos)\n- [React Styleguidist](https://react-styleguidist.js.org/) — isolated React component development environment with a living style guide\n- [Storybook](https://storybook.js.org/)\n\n### Misc\n\n- [Cupper](https://github.com/ThePacielloGroup/cupper) — documentation builder for inclusive designers\n- [Theo](https://github.com/salesforce-ux/theo) — generate design tokens for web, iOS and Android from single source\n- [ColorBox](https://www.colorbox.io) - a new way to building color systems for accessible UIs that scale\n- [Color](https://cloudflare.design/color/) - Color palette generator with aria and other interesting features\n\n## Libraries and components\n\n### React\n\n- [Atomic layout](https://github.com/kettanaito/atomic-layout) — a single component to distribute a spacial relation in your layouts\n- [macro-components](https://github.com/jxnblk/macro-components) — create flexible layout and composite UI components without the need to define arbitrary custom props\n- [React Group](https://sapegin.github.io/react-group/) — render React children with a separator\n- [React Spaceman](https://github.com/sapegin/react-spaceman) — React component to manage whitespace\n- [Rebass](https://rebassjs.org/) — Flexible \u0026 functional React design system, built with styled-system\n- [Rebass Grid](https://rebassjs.org/grid/) — responsive React grid system built with styled-components\n- [Reach UI](https://ui.reach.tech/) — accessible foundation of your React-based design system\n- [Stack Styled](https://sapegin.github.io/stack-styled/) — make stack layouts easy\n\n### Styles\n\n- [styled-tools](https://github.com/diegohaz/styled-tools) — useful interpolated functions for styled-components and other CSS in JS libraries\n- [styled-system](https://github.com/jxnblk/styled-system) — design system utilities for styled-components and other CSS in JS libraries\n\n### Colors\n\n- [coloralgorithm](https://github.com/lyft/coloralgorithm) – Javacript function to produce color sets\n\n## Design system examples\n\n- [Alfa Bank](http://design.alfabank.ru/)\n- [Ant Design](https://ant.design)\n- [Aragon UI](https://ui.aragon.org/)\n- [Audi](https://www.audi.com/ci/en/guides/user-interface/introduction.html)\n- [Auth0 Design System](https://github.com/auth0/cosmos)\n- [Backpack](https://backpack.github.io/) by Skyscanner\n- [Carbon Design System](https://www.carbondesignsystem.com) by IBM\n- [Circuit UI](https://circuit.sumup.com/#/) by SumUp \n- [cf-design](https://cloudflare.github.io/cf-ui/) by Cloudflare\n- [Lightning Design System](https://www.lightningdesignsystem.com)\n- [Marvel](https://marvelapp.com/styleguide/)\n- [Material Design](https://material.io/guidelines/)\n- [Office UI Fabric](https://developer.microsoft.com/en-us/fabric)\n- [Pivotal UI](https://styleguide.pivotal.io/)\n- [Pluralsight Design System](https://design-system.pluralsight.com/)\n- [Polaris](https://polaris.shopify.com/) by Shopify\n- [Priceline One](https://pricelinelabs.github.io/design-system/)\n- [Seek Style Guide](https://seek-oss.github.io/seek-style-guide/)\n- [Semantic UI](https://react.semantic-ui.com)\n- [Vue Design System](https://vueds.com/)\n- [Elastic UI framework](https://elastic.github.io/eui/#/)\n\n### Design system catalogs\n\n- [Adele](https://adele.uxpin.com/)\n- [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems)\n\n## Misc\n\n- [Dark Patterns](https://darkpatterns.org)\n- [Design Systems newsletter](http://news.design.systems/)\n- [React Components Catalog](https://github.com/sapegin/react-components) — curated list of great React components\n- [User Interface Design Patterns](http://ui-patterns.com)\n- [Type Scale](https://type-scale.com/) — a visual type scale calculator\n- [Website Style Guide Resources](http://styleguides.io/)\n\n## Contributing\n\nSuggestions are welcome: [send a pull request](Contributing.md) if you find something awesome about component-driven development.\n\n## Authors and license\n\n- [Andrey Okonetchnikov](http://okonet.ru/), a frontend engineer and UI \u0026 UX designer from Russia living in Vienna, Austria.\n- [Artem Sapegin](http://sapegin.me/), a frontend developer at [Wayfair](https://tech.wayfair.com/) and the creator of [React Styleguidist](https://github.com/styleguidist/react-styleguidist). He also writes about frontend at [his blog](http://blog.sapegin.me/).\n\nCC0 1.0 Universal license, see the included [License.md](License.md) file.\n","funding_links":[],"categories":["Others","Other Lists","Web Development"],"sub_categories":["TeX Lists"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent-driven%2Fawesome-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomponent-driven%2Fawesome-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent-driven%2Fawesome-list/lists"}