Working With Single Directory Components and UI Patterns

Your designer has come to you with a card layout, a masterclass in spacial awareness, client communication, and marketing prowess. You want to use it (or a variation of it) across your Drupal site with reckless abandon. But how? How can you make it consistent? How can you implement it once and make it work everywhere so site builders can take advantage?

In this presentation, we’ll jump into the transformative potential of Single Directory Components (SDCs) in Drupal—a new(ish) approach that can simplify how we organize and manage front-end code. With SDCs, developers can encapsulate all the assets related to a component (template, styles, JavaScript, and configuration) into a single directory, improving reusability, clarity, and maintainability.

We’ll also explore how the UI Patterns module integrates seamlessly with SDCs to bring structured, reusable design components into the hands of site builders and front-end developers alike. By combining these two tools, teams can create more consistent user interfaces with less duplication and more flexibility. Real-world examples will illustrate how to define and render components cleanly, while avoiding the pitfalls of traditional template sprawl.

Key Takeaways:

Understand the fundamentals and structure of Single Directory Components in Drupal.
Learn how to implement and register SDCs in your theme or module.
Discover how the UI Patterns module enhances component-driven development.
See how SDCs + UI Patterns streamline collaboration between developers and site builders.
Learn whats next with SDCs, UI Patterns, and their integration with the upcoming Experience Builder.

Dan Hansen of Sevaa Group, Inc.

https://www.drupalasheville.com/2025/...