Single Directory Components: Everything You Need to Know

Twig was introduced into Drupal core over 10 years ago. Since then, improvements to Drupal’s front-end API have been minimal. Meanwhile, other front-end ecosystems have implemented superior developer experiences including hot-reloading, tooling for automation, component libraries, shared component repositories, and more.

Drupal’s front-end developer experience has some catching-up to do, and we believe Single Directory Components (SDC) is the answer! SDC lets the developer add all of a component’s assets into one directory (e.g. template, CSS, JavaScript, and metadata). This component can then be automatically used by display modes or called upon from another template.

We’ll answer all the important questions like:

- What problem are we solving?
- How does SDC work? Will we have slots, props, & all the buzz words?
- Can it be integrated with systems like Storybook, Fractal, etc.?
- What does converting a component to SDC look like?
- How can contrib modules and themes extend this? How can you use it in your projects?
- How does this differ from contrib solutions such as SFC, UI Patterns, Emulsify, Compony, and others?
- What is the future of SDC in core? Is it done yet?