Awesome component-driven development 
A curated list of links on component-driven development and design systems
Contents
- Articles
- Talks
- Books
- Courses
- Tools
- Libraries and components
- Design system examples
- Misc
- Contributing
- Authors and license
Articles
Components
- Cards and Composability in Design Systems
- Component Based Design System With Styled-System
- Defining Component APIs in React
- Designing Button States
- Handling spacing in a UI component library
- Hidden in plain site — the levels of component reuse. The path to portability for UI components
- Managing Heading Levels In Design Systems
React
- Patterns for Style Composition in React
- Presentational and Container Components
- The Three Tenets of Styled System
Development tools
- Component-Driven Development
- Prefabricated components. The case for building UI components in isolation
- React Storybook: Develop Beautiful User Interfaces with Ease
- Storybook vs Styleguidist. A comparison of the top UI component explorers
- UI component explorers — your new favorite tool
- Using React within a Design System
Styles
- Creating truly universal React component systems. Announcing styled-components/primitives
- Designer-Oriented Styles
- Styling themes
- React SSR pitfalls in building adaptive layouts
Testing
Design systems
- 4 Things I Know About Pattern Libraries
- Building a React Component Library
- Conducting an Interface Inventory
- Creating A Living Style Guide: A Case Study
- Design Systems Sprint 0: The Silver Bullet of Product Development
- Design systems, style guides, pattern libraries. What the hell is the difference?
- Designing Imaginative Style Guides
- From Pages to Patterns: An Exercise for Everyone
- How and why we built the Marvel Styleguide
- How to construct a design system. Tips for designing and building a consistent design system
- Interface Inventory
- Setup a design system. Build a system that provides a unified set of UX, design rules and patterns
- Taking The Pattern Library To The Next Level
- Tokens in Design Systems: 10 Tips to Architect & Implement Design Decisions for Everyone
- UI Component Playbook. A 5-step guide to designing and engineering frontends with components
Design
Whitespace
- 8-Point Grid: Borders And Layouts
- Framework for creating a predictable & harmonious spacing system for faster design-dev handoff
- Intro to The 8-Point Grid System
- More Padding, Please! The power of white space in product design
- Role of White Space in User Interface Design
- Space in Design Systems. From Basics to Expanded Concepts to Apply Space with Intent
- Whitespace
- Why White Space Is Crucial To UX Design
Color
- 10 Reasons to Use Color
- Polishing GitLab’s UI: A new color system
- Re-approaching Color
- The Science of Color Contrast — An Expert Designer’s Guide
- Designing accessible color systems
Typography
- Creating a type style guide
- Deep Dive on Typescales
- Framework to create an accessible & harmonious typography system for faster design-dev handoff
- Typographic scale
- Typography in Design Systems
Design tools
- Component architecture in Figma
- Creating and Maintaining the Marvel Style Guide in Sketch
- Evolution of Tools. Closing the loop with Design Intelligence
- How to create a Design System in Sketch
- Painting with Code. Introducing our new open source library React Sketch.app
- Sketching in the Browser
Misc
- Pure UI
- Sketching Interfaces. Generating code from low fidelity wireframes
- Turning Design Mockups Into Code With Deep Learning
- Vue Design System
- Why designers and frond-end developers should talk more often
Talks
- Build Beautiful Interfaces Faster by Dominic Nguyen and Zhenya Savchenko (2016)
- Custom CSS is the path to inconsistent UI by Artem Sapegin (React Alicante 2017)
- Designing With React by Kristin Baumann (React Day Berlin 2017)
- Dream of Styleguide Driven Development by Sara Vieira (React Alicante 2017)
- Modular CSS by Andrey Okonetchnikov (React Alicante 2017)
- Nathan Curtis on Buttons in Design Systems
- Sketching in the Browser by Mark Dalgleish (JSHeroes 2018)
Books
- Atomic Design by Brad Frost
- Design Systems: A practical guide to creating design languages for digital products by Alla Kholmatova
- Design Systems Handbook by InVision
- Elements of Typographic Style by Robert Bringhurst
- Front-end Style Guides: Creating and Maintaining Style Guides for Websites by Anna Debenham
- Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites by Micah Godbolt
- Inclusive Components by Heydon Pickering
- On Web Typography by Jason Santa Maria
Courses
Tools
Development workbenches
- Bit - A tool for isolating, developing and sharing components between projects and applications, with 2-way collaboartion over components.
- React Cosmos
- React Styleguidist — isolated React component development environment with a living style guide
- Storybook
Misc
- Cupper — documentation builder for inclusive designers
- Theo — generate design tokens for web, iOS and Android from single source
- ColorBox - a new way to building color systems for accessible UIs that scale
- Color - Color palette generator with aria and other interesting features
Libraries and components
React
- Atomic layout — a single component to distribute a spacial relation in your layouts
- macro-components — create flexible layout and composite UI components without the need to define arbitrary custom props
- React Group — render React children with a separator
- React Spaceman — React component to manage whitespace
- Rebass — Flexible & functional React design system, built with styled-system
- Rebass Grid — responsive React grid system built with styled-components
- Reach UI — accessible foundation of your React-based design system
- Stack Styled — make stack layouts easy
Styles
- styled-tools — useful interpolated functions for styled-components and other CSS in JS libraries
- styled-system — design system utilities for styled-components and other CSS in JS libraries
Colors
- coloralgorithm – Javacript function to produce color sets
Design system examples
- Alfa Bank
- Ant Design
- Aragon UI
- Audi
- Auth0 Design System
- Backpack by Skyscanner
- Carbon Design System by IBM
- Circuit UI by SumUp
- cf-design by Cloudflare
- Lightning Design System
- Marvel
- Material Design
- Office UI Fabric
- Pivotal UI
- Pluralsight Design System
- Polaris by Shopify
- Priceline One
- Seek Style Guide
- Semantic UI
- Vue Design System
- Elastic UI framework
Design system catalogs
Misc
- Dark Patterns
- Design Systems newsletter
- React Components Catalog — curated list of great React components
- User Interface Design Patterns
- Type Scale — a visual type scale calculator
- Website Style Guide Resources
Contributing
Suggestions are welcome: send a pull request if you find something awesome about component-driven development.
Authors and license
- Andrey Okonetchnikov, a frontend engineer and UI & UX designer from Russia living in Vienna, Austria.
- Artem Sapegin, a frontend developer at Wayfair and the creator of React Styleguidist. He also writes about frontend at his blog.
CC0 1.0 Universal license, see the included License.md file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent