Atomic Design: Breaking Up is Hard to Do, Enter Compound Components!

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.

Design Systems With Seatbelts: Accessibility Built In, Not Bolted On

Many teams want to build accessible products, but accessibility often slips through the cracks during development. Perhaps a modal does not trap focus properly, or someone removes the focus ring because it does not align with the design. These small oversights can make a product frustrating or even impossible to use for people who rely on a keyboard or screen reader.

The problem is not that developers do not care, but that most systems do not help them make the right choices by default. In this talk, I will demonstrate how to incorporate accessibility into your components from the start, utilizing React and design system patterns. We will look at how compound components can enforce the correct structure, how tokens help maintain contrast and motion preferences, and how tools like TypeScript and linters can support developers without getting in the way.

Along the way, I will live-code more complex components and think out loud through the accessibility challenges, showing how to align with WCAG practically. Whether you are starting fresh or improving an existing setup, this talk gives you tools and mental models to build accessible products with confidence.