We've heard from many of you that you want to learn more about Single Directory Components (SDCs) in Drupal. Which makes sense, since they are one of the most exciting new features in Drupal theming since Twig was added to Drupal 8. We’re excited to share that the first phase of our brand-new SDC course is now available!
Explore the Single Directory Components in Drupal course now.
Why single directory components?
SDCs are one of the most exciting new features in Drupal. They modernize how we build front-end components by bundling everything--Twig, YAML, CSS, and JavaScript--into a single easy-to-manage directory. This makes development more intuitive, promotes reusability, and helps align Drupal theming with modern component-based frontend development workflows.
I've been excited about SDC since it was introduced as an experimental module. (Single directory components are now integrated into Drupal core.) I gave a couple of presentations about it early on. As the SDC ecosystem continues to evolve, and with the advent of Experience Builder in the near future, I believe understanding how to create, use, and maintain a single directory component library will become an essential Drupal skill for both theme and module developers.
So that's exactly what this course delivers.
What you’ll learn
In this course, we’ll walk step-by-step through:
- Creating your first component and understanding the file structure.
- Using props and slots to pass data into components.
- Embedding SDCs in Twig templates to bring them into your site.
- Debugging common issues (like those pesky missing props).
- Best practices for working with components in real Drupal projects.
Tutorials in the course (so far)
Here’s the full list of tutorials you can dive into today:
- Anatomy of a Drupal Single Directory Component (SDC)
- Create Your First Drupal Single Directory Component (SDC)
- Add a Component YAML File for a Drupal SDC
- Add a Twig Template to Your Single Directory Component
- Add CSS and JavaScript to a Drupal SDC
- Use a Component in a Module via Render Arrays
- Use a Component in a Twig Template
More on the way
This is just the start! We’re already working on follow-up tutorials that will dig deeper into advanced component usage, real-world workflows, and strategies for migrating existing themes to SDCs.
Check out the full course here: Single Directory Components in Drupal
We'd love to hear what you think! Share your feedback with us in the comments, or let us know what else you'd like to see in future tutorials.
Add new comment