In this talk, we shall highlight the limitations of Atomic Design in complex UI development and introduce Compound Components as a more flexible solution. We will contrast Atomic Design and Compound Components, showing their differences with practical examples as code examples and real-life live coding sessions.

The talk will cover state management and how Compound Components give better ways to manage state throughout an application. We will see Figma designs and translate them into code, covering component decomposition from the ground up. We will share in frontend API architecture how to drive clear and flexible structures about how components interact with each other. Further down, techniques for dealing with complexity and scalability of large projects; and collaboration strategies between designers and developers.

By the end of this talk, you will know how to implement Compound Components to enable the creation of scalable, maintainable, and customizable UI elements in collaboration with designers. This session is jammed with useful information and live coding to bring your React development to the next level!

In this talk, we'll be looking at the limitations of Atomic Design for complex UI development and present the Compound Components pattern as a flexible solution for React developers. We'll contrast Atomic Design with the Compound Components through real life examples, and live coding sessions. We will go over state management, frontend API architecture, and strategies for handling complexity and scalability. By the end, you'll learn how to implement compound components enabling you to scale, maintain, and customize UI with designers.