Drupal frontend development has evolved significantly in recent versions, and Single Directory Components (SDC) represent one of the biggest improvements to modern theming workflows.

SDC introduces a component-based architecture where everything needed to render a UI component lives in a single directory — simplifying development, improving maintainability, and aligning Drupal with modern frontend practices.

Single Directory Components (SDC) are Drupal core’s modern approach to building reusable UI components. As the name suggests, all files required to render a component live inside a single directory. This includes:

• Twig templates
• YAML metadata
• Optional CSS
• Optional JavaScript
• Optional screenshots, media, or PHP files

SDC brings a component-based architecture to Drupal theming, similar to how modern frontend frameworks like React or Vue organize UI elements.

If you’ve worked on large Drupal projects, you’ve likely experienced:

• Searching across multiple folders for a Twig template
• Managing libraries in separate YAML files
• Tracking CSS and JS spread across themes and modules

SDC was designed to eliminate these frustrations.

Why Drupal Introduced SDC  

Traditional Drupal theming often spreads related files across multiple directories:

• Twig templates in one place
• CSS in another
• JavaScript somewhere else
• Libraries defined separately

For frontend developers, this can become confusing and time-consuming.

SDC was introduced to solve these problems by:

• Improving discoverability
• Reducing cognitive load
• Making frontend development more intuitive

Aligning Drupal with modern component-driven workflows

Common Problems in Traditional Drupal Theming?  

As frontend developers, we often face challenges such as:

1. Difficult Codebase Navigation  

Finding the correct Twig template, CSS file, or JS file can feel like navigating a maze—especially in large projects with custom, core, and contrib themes.

2. Context Switching Confusion  

Jumping between multiple Twig templates makes it easy to lose track of where logic or markup lives.

3. Variable Discovery Issues  

Understanding which variables are available in a Twig template and where they come from is often unclear.

4. Asset Tracking Problems  

It’s not always obvious:

• How CSS and JS are loaded
• Which library is responsible
• Where images or assets belong

5. Template Location Uncertainty  

Is the template coming from:

• A module?
• A base theme?
• A child theme?

A contrib theme?

How SDC Fixes These Issues  

Single Directory Components solve these problems by keeping everything related to a component in one place.

Each component has:

• A clearly defined API (via YAML)
• Its own Twig template
• Its own CSS and JS
• A predictable folder structure

This makes frontend development:

• Faster
• Cleaner
• Easier to understand

Easier to maintain

What Does an SDC Component Contain?  

A typical SDC component directory may include:

• my-component.twig – Markup
• my-component.yml – Metadata, props, schema, and dependencies
• my-component.css – Styles
• my-component.js – Behavior
• my-component.png – Screenshot (optional)

my-component.php – Logic (optional)

Automatic Library Creation  

One of the biggest advantages of SDC is automatic library handling.

• If my-component.css or my-component.js exists, Drupal automatically creates and attaches a library.
• No need to manually define libraries in .libraries.yml.
• Additional dependencies can still be declared in the component’s YAML file if needed.

This greatly simplifies asset management.

Key Benefits of Using SDC  

1. Better Organization  

All files related to a component live together, making it easy to find and update them.

2. Reusability  

Components are modular and can be reused across:

• Pages
• Layout Builder
• Other components
• Themes

3. Consistency  

Using components ensures a consistent UI and UX across the site.

4. Scalability  

New features can be added by introducing new components without disturbing existing ones.

5. Easier Testing  

Components can be tested in isolation, making debugging simpler.

6. Improved Collaboration  

Teams can share and reuse components across projects, reducing duplication of effort.

Goals of Single Directory Components  

The primary goals of SDC are:

1. Create Reusable UI Elements  

Just like Twig templates can be imported, embedded, or extended, SDC components are designed to be reusable and composable.

2. Use Components Where They Make Sense  

SDC does not aim to replace everything.
Instead, it focuses on improving theming—especially within custom site themes.

3. Simplify Frontend Development  

SDC streamlines the process of generating:

• HTML
• CSS
• JavaScript

This makes Drupal frontend development more approachable, even for newcomers.

4. Clearly Defined Component APIs  

SDC allows developers to define schemas and props in YAML, making data structures explicit and predictable.

Future Benefits of SDC  

One of the most powerful future-facing features of SDC is schema support in YAML.

Because components define their data structure:

• Drupal core and contrib modules can auto-generate forms
• Components can be added directly via:
• Layout Builder
• CKEditor
• Other UI systems

This means no custom entities will be required in many cases.

Conclusion  

Single Directory Components are more than just a new feature — they represent a shift toward modern frontend architecture within Drupal.

By embracing component-based development, Drupal now aligns with modern frameworks while preserving its powerful flexibility.

For frontend developers, SDC reduces complexity, improves maintainability, and enables scalable UI development for future-ready Drupal projects.